diff --git a/apps/web-ele/src/adapter/component/index.ts b/apps/web-ele/src/adapter/component/index.ts
index 0804f9f6..7a5d9f07 100644
--- a/apps/web-ele/src/adapter/component/index.ts
+++ b/apps/web-ele/src/adapter/component/index.ts
@@ -163,6 +163,7 @@ const withDefaultPlaceholder = <T extends Component>(
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiCascader'
   | 'ApiSelect'
   | 'ApiTreeSelect'
   | 'Checkbox'
@@ -184,7 +185,6 @@ export type ComponentType =
   | 'TimePicker'
   | 'TreeSelect'
   | 'Upload'
-  | 'ApiCascader'
   | BaseFormComponentType;
 
 async function initComponentAdapter() {
@@ -212,13 +212,6 @@ async function initComponentAdapter() {
       'select',
       {
         component: ElCascader,
-        props: {
-          props: {
-            label: 'label',
-            value: 'value',
-            children: 'children',
-          },
-        },
       },
     ),
     ApiTreeSelect: withDefaultPlaceholder(
@@ -229,7 +222,6 @@ async function initComponentAdapter() {
       'select',
       {
         component: ElTreeSelect,
-        props: { label: 'label', children: 'children' },
         nodeKey: 'value',
         loadingSlot: 'loading',
         optionsPropName: 'data',
diff --git a/apps/web-ele/src/api/mall/product/category.ts b/apps/web-ele/src/api/mall/product/category.ts
index 3ca05b0f..12d7202f 100644
--- a/apps/web-ele/src/api/mall/product/category.ts
+++ b/apps/web-ele/src/api/mall/product/category.ts
@@ -53,6 +53,6 @@ export function getCategoryList(params: any) {
 // 获得商品分类列表
 export function getCategorySimpleList() {
   return requestClient.get<MallCategoryApi.Category[]>(
-    '/product/category/list-all-simple',
+    '/product/category/list',
   );
 }
diff --git a/apps/web-ele/src/api/mall/statistics/member.ts b/apps/web-ele/src/api/mall/statistics/member.ts
index fb7a6b01..bcc99304 100644
--- a/apps/web-ele/src/api/mall/statistics/member.ts
+++ b/apps/web-ele/src/api/mall/statistics/member.ts
@@ -1,6 +1,6 @@
 import type { MallDataComparisonResp } from './common';
 
-import { formatDate } from '@vben/utils';
+import { formatDate2 } from '@vben/utils';
 
 import { requestClient } from '#/api/request';
 
@@ -84,7 +84,10 @@ export function getMemberAnalyse(params: MallMemberStatisticsApi.AnalyseReq) {
     '/statistics/member/analyse',
     {
       params: {
-        times: [formatDate(params.times[0]), formatDate(params.times[1])],
+        times: [
+          formatDate2(params.times[0] || new Date()),
+          formatDate2(params.times[1] || new Date()),
+        ],
       },
     },
   );
@@ -124,7 +127,7 @@ export function getMemberRegisterCountList(beginTime: Date, endTime: Date) {
     '/statistics/member/register-count-list',
     {
       params: {
-        times: [formatDate(beginTime), formatDate(endTime)],
+        times: [formatDate2(beginTime), formatDate2(endTime)],
       },
     },
   );
diff --git a/apps/web-ele/src/api/mall/statistics/product.ts b/apps/web-ele/src/api/mall/statistics/product.ts
index d458d435..089da4af 100644
--- a/apps/web-ele/src/api/mall/statistics/product.ts
+++ b/apps/web-ele/src/api/mall/statistics/product.ts
@@ -2,6 +2,8 @@ import type { PageParam, PageResult } from '@vben/request';
 
 import type { MallDataComparisonResp } from './common';
 
+import { formatDate2 } from '@vben/utils';
+
 import { requestClient } from '#/api/request';
 
 export namespace MallProductStatisticsApi {
@@ -38,26 +40,58 @@ export namespace MallProductStatisticsApi {
     /** 浏览转化率 */
     browseConvertPercent: number;
   }
+
+  /** 会员分析 Request */
+  export interface ProductStatisticsReq {
+    times: Date[];
+  }
 }
 
 /** 获得商品统计分析 */
-export function getProductStatisticsAnalyse(params: PageParam) {
+export function getProductStatisticsAnalyse(
+  params: MallProductStatisticsApi.ProductStatisticsReq,
+) {
   return requestClient.get<
     MallDataComparisonResp<MallProductStatisticsApi.ProductStatistics>
-  >('/statistics/product/analyse', { params });
+  >('/statistics/product/analyse', {
+    params: {
+      times: [
+        formatDate2(params.times[0] || new Date()),
+        formatDate2(params.times[1] || new Date()),
+      ],
+    },
+  });
 }
 
 /** 获得商品状况明细 */
-export function getProductStatisticsList(params: PageParam) {
+export function getProductStatisticsList(
+  params: MallProductStatisticsApi.ProductStatisticsReq,
+) {
   return requestClient.get<MallProductStatisticsApi.ProductStatistics[]>(
     '/statistics/product/list',
-    { params },
+    {
+      params: {
+        times: [
+          formatDate2(params.times[0] || new Date()),
+          formatDate2(params.times[1] || new Date()),
+        ],
+      },
+    },
   );
 }
 
 /** 导出获得商品状况明细 Excel */
-export function exportProductStatisticsExcel(params: PageParam) {
-  return requestClient.download('/statistics/product/export-excel', { params });
+export function exportProductStatisticsExcel(
+  params: MallProductStatisticsApi.ProductStatisticsReq,
+) {
+  return requestClient.download('/statistics/product/export-excel', {
+    params: {
+      times: [
+        formatDate2(params.times[0] || new Date()),
+        formatDate2(params.times[1] || new Date()),
+      ],
+    },
+  });
 }
 
 /** 获得商品排行榜分页 */
diff --git a/apps/web-ele/src/api/mall/statistics/trade.ts b/apps/web-ele/src/api/mall/statistics/trade.ts
index 1f866c63..0b52be51 100644
--- a/apps/web-ele/src/api/mall/statistics/trade.ts
+++ b/apps/web-ele/src/api/mall/statistics/trade.ts
@@ -1,6 +1,6 @@
 import type { MallDataComparisonResp } from './common';
 
-import { formatDate } from '@vben/utils';
+import { formatDate2 } from '@vben/utils';
 
 import { requestClient } from '#/api/request';
 
@@ -15,7 +15,7 @@ export namespace MallTradeStatisticsApi {
 
   /** 交易状况 Request */
   export interface TradeTrendReq {
-    times: [Date, Date];
+    times: Date[];
   }
 
   /** 交易状况统计 Response */
@@ -64,8 +64,11 @@ export namespace MallTradeStatisticsApi {
 /** 时间参数需要格式化, 确保接口能识别 */
 const formatDateParam = (params: MallTradeStatisticsApi.TradeTrendReq) => {
   return {
-    times: [formatDate(params.times[0]), formatDate(params.times[1])],
-  } as MallTradeStatisticsApi.TradeTrendReq;
+    times: [
+      formatDate2(params.times[0] || new Date()),
+      formatDate2(params.times[1] || new Date()),
+    ],
+  };
 };
 
 /** 查询交易统计 */
@@ -128,8 +131,8 @@ export function getOrderCountTrendComparison(
   >('/statistics/trade/order-count-trend', {
     params: {
       type,
-      beginTime: formatDate(beginTime),
-      endTime: formatDate(endTime),
+      beginTime: formatDate2(beginTime),
+      endTime: formatDate2(endTime),
     },
   });
 }
diff --git a/apps/web-ele/src/api/mall/trade/afterSale/index.ts b/apps/web-ele/src/api/mall/trade/afterSale/index.ts
index 95326af0..2aed74c2 100644
--- a/apps/web-ele/src/api/mall/trade/afterSale/index.ts
+++ b/apps/web-ele/src/api/mall/trade/afterSale/index.ts
@@ -1,5 +1,7 @@
 import type { PageParam, PageResult } from '@vben/request';
 
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
 import { requestClient } from '#/api/request';
 
 export namespace MallAfterSaleApi {
@@ -75,6 +77,21 @@ export namespace MallAfterSaleApi {
     receiveTime?: Date;
     /** 收货备注 */
     receiveReason?: string;
+    /** 订单 */
+    order?: MallOrderApi.Order;
+    /** 订单操作日志 */
+    logs?: MallOrderApi.OrderLog[];
+    /** 订单项 */
+    orderItem?: MallOrderApi.OrderItem;
+    /** 用户信息 */
+    user?: {
+      /** 用户头像 */
+      avatar?: string;
+      /** 用户编号 */
+      id?: null | number;
+      /** 用户昵称 */
+      nickname?: string;
+    };
   }
 
   /** 拒绝售后请求 */
diff --git a/apps/web-ele/src/api/mall/trade/order/index.ts b/apps/web-ele/src/api/mall/trade/order/index.ts
index 6017fa5f..a9d7d188 100644
--- a/apps/web-ele/src/api/mall/trade/order/index.ts
+++ b/apps/web-ele/src/api/mall/trade/order/index.ts
@@ -53,6 +53,8 @@ export namespace MallOrderApi {
 
   /** 订单日志 */
   export interface OrderLog {
+    /** 日志编号 */
+    id: number;
     /** 日志内容 */
     content?: string;
     /** 创建时间 */
@@ -108,7 +110,7 @@ export namespace MallOrderApi {
     /** 订单调价（总） */
     adjustPrice?: null | number;
     /** 应付金额（总） */
-    payPrice?: null | number;
+    payPrice?: null | number | string;
     /** 发货方式 */
     deliveryType?: null | number;
     /** 自提门店编号 */
@@ -226,6 +228,13 @@ export namespace MallOrderApi {
     /** 收件人详细地址 */
     receiverDetailAddress: string;
   }
+
+  export interface OrderExpressTrackRespDTO {
+    /** 发生时间 */
+    time: Date;
+    /** 快递状态 */
+    content: string;
+  }
 }
 
 /** 查询交易订单列表 */
@@ -254,7 +263,9 @@ export function getOrder(id: number) {
 
 /** 查询交易订单物流详情 */
 export function getExpressTrackList(id: number) {
-  return requestClient.get(`/trade/order/get-express-track-list?id=${id}`);
+  return requestClient.get<MallOrderApi.OrderExpressTrackRespDTO[]>(
+    `/trade/order/get-express-track-list?id=${id}`,
+  );
 }
 
 /** 订单发货 */
diff --git a/apps/web-ele/src/locales/langs/zh-CN/page.json b/apps/web-ele/src/locales/langs/zh-CN/page.json
index eefc4924..30180ddf 100644
--- a/apps/web-ele/src/locales/langs/zh-CN/page.json
+++ b/apps/web-ele/src/locales/langs/zh-CN/page.json
@@ -29,5 +29,62 @@
   "tenant": {
     "placeholder": "请选择租户",
     "success": "切换租户成功"
+  },
+  "common": {
+    "inputText": "请输入",
+    "selectText": "请选择",
+    "startTimeText": "开始时间",
+    "endTimeText": "结束时间",
+    "login": "登录",
+    "required": "该项为必填项",
+    "loginOut": "退出系统",
+    "document": "项目文档",
+    "profile": "个人中心",
+    "reminder": "温馨提示",
+    "loginOutMessage": "是否退出本系统？",
+    "back": "返回",
+    "ok": "确定",
+    "save": "保存",
+    "cancel": "取消",
+    "close": "关闭",
+    "reload": "重新加载",
+    "success": "成功",
+    "closeTab": "关闭标签页",
+    "closeTheLeftTab": "关闭左侧标签页",
+    "closeTheRightTab": "关闭右侧标签页",
+    "closeOther": "关闭其他标签页",
+    "closeAll": "关闭全部标签页",
+    "prevLabel": "上一步",
+    "nextLabel": "下一步",
+    "skipLabel": "跳过",
+    "doneLabel": "结束",
+    "menu": "菜单",
+    "menuDes": "以路由的结构渲染的菜单栏",
+    "collapse": "展开缩收",
+    "collapseDes": "展开和缩放菜单栏",
+    "tagsView": "标签页",
+    "tagsViewDes": "用于记录路由历史记录",
+    "tool": "工具",
+    "toolDes": "用于设置定制系统",
+    "query": "查询",
+    "reset": "重置",
+    "shrink": "收起",
+    "expand": "展开",
+    "confirmTitle": "系统提示",
+    "exportMessage": "是否确认导出数据项？",
+    "importMessage": "是否确认导入数据项？",
+    "createSuccess": "新增成功",
+    "updateSuccess": "修改成功",
+    "delMessage": "是否删除所选中数据？",
+    "delDataMessage": "是否删除数据？",
+    "delNoData": "请选择需要删除的数据",
+    "delSuccess": "删除成功",
+    "index": "序号",
+    "status": "状态",
+    "createTime": "创建时间",
+    "updateTime": "更新时间",
+    "copy": "复制",
+    "copySuccess": "复制成功",
+    "copyError": "复制失败"
   }
 }
diff --git a/apps/web-ele/src/router/routes/modules/mall.ts b/apps/web-ele/src/router/routes/modules/mall.ts
index 80416ba6..d5d39646 100644
--- a/apps/web-ele/src/router/routes/modules/mall.ts
+++ b/apps/web-ele/src/router/routes/modules/mall.ts
@@ -40,37 +40,37 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
-  // {
-  //   path: '/mall/trade',
-  //   name: 'TradeCenter',
-  //   meta: {
-  //     title: '交易中心',
-  //     icon: 'lucide:shopping-cart',
-  //     keepAlive: true,
-  //     hideInMenu: true,
-  //   },
-  //   children: [
-  //     {
-  //       path: String.raw`order/detail/:id(\d+)`,
-  //       name: 'TradeOrderDetail',
-  //       meta: {
-  //         title: '订单详情',
-  //         activeMenu: '/mall/trade/order',
-  //       },
-  //       component: () => import('#/views/mall/trade/order/detail/index.vue'),
-  //     },
-  //     {
-  //       path: String.raw`after-sale/detail/:id(\d+)`,
-  //       name: 'TradeAfterSaleDetail',
-  //       meta: {
-  //         title: '退款详情',
-  //         activeMenu: '/mall/trade/after-sale',
-  //       },
-  //       component: () =>
-  //         import('#/views/mall/trade/afterSale/detail/index.vue'),
-  //     },
-  //   ],
-  // },
+  {
+    path: '/mall/trade',
+    name: 'TradeCenter',
+    meta: {
+      title: '交易中心',
+      icon: 'lucide:shopping-cart',
+      keepAlive: true,
+      hideInMenu: true,
+    },
+    children: [
+      {
+        path: String.raw`order/detail/:id(\d+)`,
+        name: 'TradeOrderDetail',
+        meta: {
+          title: '订单详情',
+          activeMenu: '/mall/trade/order',
+        },
+        component: () => import('#/views/mall/trade/order/modules/detail.vue'),
+      },
+      {
+        path: String.raw`after-sale/detail/:id(\d+)`,
+        name: 'TradeAfterSaleDetail',
+        meta: {
+          title: '退款详情',
+          activeMenu: '/mall/trade/after-sale',
+        },
+        component: () =>
+          import('#/views/mall/trade/afterSale/modules/detail.vue'),
+      },
+    ],
+  },
 ];
 
 export default routes;
diff --git a/apps/web-ele/src/utils/constants.ts b/apps/web-ele/src/utils/constants.ts
index 78da9f94..9b684696 100644
--- a/apps/web-ele/src/utils/constants.ts
+++ b/apps/web-ele/src/utils/constants.ts
@@ -201,6 +201,16 @@ export const PayOrderStatusEnum = {
 };
 
 // ========== MALL - 商品模块 ==========
+/**
+ * 商品 首页 日期类型
+ */
+export enum TimeRangeTypeEnum {
+  DAY30 = 1,
+  MONTH = 30,
+  WEEK = 7,
+  YEAR = 365,
+}
+
 /**
  * 商品 SPU 状态
  */
diff --git a/apps/web-ele/src/views/infra/codegen/index.vue b/apps/web-ele/src/views/infra/codegen/index.vue
index a34039df..e116e064 100644
--- a/apps/web-ele/src/views/infra/codegen/index.vue
+++ b/apps/web-ele/src/views/infra/codegen/index.vue
@@ -12,7 +12,7 @@ import { useRouter } from 'vue-router';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -73,47 +73,38 @@ function onEdit(row: InfraCodegenApi.CodegenTable) {
 
 /** 删除代码生成配置 */
 async function onDelete(row: InfraCodegenApi.CodegenTable) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.tableName]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该代码生成配置吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteCodegenTable(row.id);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.tableName]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteCodegenTable(row.id);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.tableName]));
+  onRefresh();
 }
 
 /** 批量删除代码生成配置 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该代码生成配置吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteCodegenTableList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteCodegenTableList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 /** 同步数据库 */
 async function onSync(row: InfraCodegenApi.CodegenTable) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.updating', [row.tableName]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要同步该代码生成配置吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await syncCodegenFromDB(row.id);
-    ElMessage.success($t('ui.actionMessage.updateSuccess', [row.tableName]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await syncCodegenFromDB(row.id);
+  ElMessage.success($t('ui.actionMessage.updateSuccess', [row.tableName]));
+  onRefresh();
 }
 
 /** 生成代码 */
diff --git a/apps/web-ele/src/views/infra/config/index.vue b/apps/web-ele/src/views/infra/config/index.vue
index d73251df..c77ce8ce 100644
--- a/apps/web-ele/src/views/infra/config/index.vue
+++ b/apps/web-ele/src/views/infra/config/index.vue
@@ -10,7 +10,7 @@ import { ref } from 'vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -52,34 +52,26 @@ function onEdit(row: InfraConfigApi.Config) {
 
 /** 删除参数 */
 async function onDelete(row: InfraConfigApi.Config) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该参数吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteConfig(row.id as number);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteConfig(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 批量删除参数 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该参数吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteConfigList(checkedIds.value);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteConfigList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/infra/dataSourceConfig/index.vue b/apps/web-ele/src/views/infra/dataSourceConfig/index.vue
index 65eacafe..f99b5653 100644
--- a/apps/web-ele/src/views/infra/dataSourceConfig/index.vue
+++ b/apps/web-ele/src/views/infra/dataSourceConfig/index.vue
@@ -10,7 +10,7 @@ import { onMounted, ref } from 'vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -40,34 +40,26 @@ function onEdit(row: InfraDataSourceConfigApi.DataSourceConfig) {
 
 /** 删除数据源 */
 async function onDelete(row: InfraDataSourceConfigApi.DataSourceConfig) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该数据源吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteDataSourceConfig(row.id as number);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    await handleLoadData();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteDataSourceConfig(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 批量删除数据源 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该数据源吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteDataSourceConfigList(checkedIds.value);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    await handleLoadData();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteDataSourceConfigList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/infra/file/index.vue b/apps/web-ele/src/views/infra/file/index.vue
index 6b6134a9..37d40a21 100644
--- a/apps/web-ele/src/views/infra/file/index.vue
+++ b/apps/web-ele/src/views/infra/file/index.vue
@@ -11,7 +11,7 @@ import { Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty, openWindow } from '@vben/utils';
 
 import { useClipboard } from '@vueuse/core';
-import { ElButton, ElImage, ElLoading, ElMessage } from 'element-plus';
+import { ElButton, ElImage, ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteFile, deleteFileList, getFilePage } from '#/api/infra/file';
@@ -60,36 +60,28 @@ function openUrl(url?: string) {
 
 /** 删除文件 */
 async function onDelete(row: InfraFileApi.File) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name || row.path]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该文件吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteFile(row.id as number);
-    loadingInstance.close();
-    ElMessage.success(
-      $t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
-    );
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteFile(row.id as number);
+  ElMessage.success(
+    $t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
+  );
+  onRefresh();
 }
 
 /** 批量删除文件 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该文件吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteFileList(checkedIds.value);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteFileList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/infra/fileConfig/index.vue b/apps/web-ele/src/views/infra/fileConfig/index.vue
index 96201c45..8ab9d351 100644
--- a/apps/web-ele/src/views/infra/fileConfig/index.vue
+++ b/apps/web-ele/src/views/infra/fileConfig/index.vue
@@ -10,7 +10,7 @@ import { ref } from 'vue';
 import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty, openWindow } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -86,34 +86,26 @@ async function onTest(row: InfraFileConfigApi.FileConfig) {
 
 /** 删除文件配置 */
 async function onDelete(row: InfraFileConfigApi.FileConfig) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该文件配置吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteFileConfig(row.id as number);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteFileConfig(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 批量删除文件配置 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该文件配置吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteFileConfigList(checkedIds.value);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteFileConfigList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/infra/job/index.vue b/apps/web-ele/src/views/infra/job/index.vue
index eeb191e0..f631e944 100644
--- a/apps/web-ele/src/views/infra/job/index.vue
+++ b/apps/web-ele/src/views/infra/job/index.vue
@@ -11,7 +11,7 @@ import { useRouter } from 'vue-router';
 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -105,32 +105,26 @@ function onLog(row?: InfraJobApi.Job) {
 
 /** 删除任务 */
 async function onDelete(row: InfraJobApi.Job) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该任务吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteJob(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteJob(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 批量删除任务 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该任务吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteJobList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteJobList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/mall/home/components/analysis-chart-card.vue b/apps/web-ele/src/views/mall/home/components/analysis-chart-card.vue
new file mode 100644
index 00000000..807b6bad
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/analysis-chart-card.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+interface Props {
+  title: string;
+}
+
+defineOptions({
+  name: 'AnalysisChartCard',
+});
+
+withDefaults(defineProps<Props>(), {});
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="my--1.5 flex flex-row items-center justify-between">
+        <div class="text-xl">{{ title }}</div>
+        <slot name="header-suffix"></slot>
+      </div>
+    </template>
+    <template #default>
+      <slot></slot>
+    </template>
+  </el-card>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/components/analysis-overview-icon.vue b/apps/web-ele/src/views/mall/home/components/analysis-overview-icon.vue
new file mode 100644
index 00000000..80ebbbd8
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/analysis-overview-icon.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { AnalysisOverviewIconItem } from './data';
+
+import { computed } from 'vue';
+
+import { CountTo } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+interface Props {
+  items?: AnalysisOverviewIconItem[];
+  modelValue?: AnalysisOverviewIconItem[];
+  columnsNumber?: number;
+}
+
+defineOptions({
+  name: 'AnalysisOverview',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  modelValue: () => [],
+  columnsNumber: 4,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const itemsData = computed({
+  get: () => (props.modelValue?.length ? props.modelValue : props.items),
+  set: (value) => emit('update:modelValue', value),
+});
+
+// 计算动态的grid列数类名
+const gridColumnsClass = computed(() => {
+  const colNum = props.columnsNumber;
+  return {
+    'lg:grid-cols-1': colNum === 1,
+    'lg:grid-cols-2': colNum === 2,
+    'lg:grid-cols-3': colNum === 3,
+    'lg:grid-cols-4': colNum === 4,
+    'lg:grid-cols-5': colNum === 5,
+    'lg:grid-cols-6': colNum === 6,
+  };
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2" :class="gridColumnsClass">
+    <template v-for="item in itemsData" :key="item.title">
+      <div
+        class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4"
+      >
+        <div
+          class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded"
+          :class="`${item.iconColor} ${item.iconBgColor}`"
+        >
+          <IconifyIcon :icon="item.icon" class="text-2xl" />
+        </div>
+        <div class="flex flex-col gap-1">
+          <div class="flex items-center gap-1 text-gray-500">
+            <span class="text-sm">{{ item.title }}</span>
+            <el-tooltip
+              :content="item.tooltip"
+              placement="top-start"
+              v-if="item.tooltip"
+            >
+              <IconifyIcon
+                icon="ep:warning"
+                class="flex items-center text-sm"
+              />
+            </el-tooltip>
+          </div>
+          <div class="flex flex-row items-baseline gap-2">
+            <div class="text-3xl">
+              <CountTo
+                :prefix="item.prefix"
+                :end-val="item.value"
+                :decimals="item.decimals"
+              />
+            </div>
+            <span
+              v-if="item.percent !== undefined"
+              :class="
+                Number(item.percent) > 0 ? 'text-red-500' : 'text-green-500'
+              "
+              class="flex items-center whitespace-nowrap"
+            >
+              <span class="text-sm">{{ Math.abs(Number(item.percent)) }}%</span>
+              <IconifyIcon
+                :icon="
+                  Number(item.percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'
+                "
+                class="ml-0.5 text-sm"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/components/analysis-overview.vue b/apps/web-ele/src/views/mall/home/components/analysis-overview.vue
new file mode 100644
index 00000000..6e1aa439
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/analysis-overview.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import type { AnalysisOverviewItem } from './data';
+
+import { computed } from 'vue';
+
+import { VbenCountToAnimator } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+interface Props {
+  items?: AnalysisOverviewItem[];
+  modelValue?: AnalysisOverviewItem[];
+  columnsNumber?: number;
+}
+
+defineOptions({
+  name: 'AnalysisOverview',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  modelValue: () => [],
+  columnsNumber: 4,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const itemsData = computed({
+  get: () => (props.modelValue?.length ? props.modelValue : props.items),
+  set: (value) => emit('update:modelValue', value),
+});
+
+// 计算动态的grid列数类名
+const gridColumnsClass = computed(() => {
+  const colNum = props.columnsNumber;
+  return {
+    'lg:grid-cols-1': colNum === 1,
+    'lg:grid-cols-2': colNum === 2,
+    'lg:grid-cols-3': colNum === 3,
+    'lg:grid-cols-4': colNum === 4,
+    'lg:grid-cols-5': colNum === 5,
+    'lg:grid-cols-6': colNum === 6,
+  };
+});
+
+// 计算环比增长率
+const calculateGrowthRate = (
+  currentValue: number,
+  previousValue: number,
+): { isPositive: boolean; rate: number } => {
+  if (previousValue === 0) {
+    return { rate: currentValue > 0 ? 100 : 0, isPositive: currentValue >= 0 };
+  }
+
+  const rate = ((currentValue - previousValue) / previousValue) * 100;
+  return { rate: Math.abs(rate), isPositive: rate >= 0 };
+};
+
+// 格式化增长率显示
+const formatGrowthRate = (rate: number): string => {
+  return rate.toFixed(1);
+};
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2" :class="gridColumnsClass">
+    <template v-for="item in itemsData" :key="item.title">
+      <el-card :title="item.title" class="w-full">
+        <template #header>
+          <div class="text-lg font-semibold">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center">
+                <span>{{ item.title }}</span>
+                <span v-if="item.tooltip" class="ml-1 inline-block">
+                  <el-tooltip>
+                    <template #default>
+                      <div
+                        class="inline-flex h-4 w-4 translate-y-[-3px] items-center justify-center rounded-full bg-gray-200 text-xs font-bold text-gray-600"
+                      >
+                        !
+                      </div>
+                    </template>
+                    <template #content>
+                      {{ item.tooltip }}
+                    </template>
+                  </el-tooltip>
+                </span>
+              </div>
+              <el-tag>今日</el-tag>
+            </div>
+          </div>
+        </template>
+        <template #default>
+          <!-- 左右布局：左边数字，右边图标 -->
+          <div class="flex items-center justify-between">
+            <!-- 左侧：数字显示 -->
+            <div class="flex-1">
+              <div class="flex items-baseline">
+                <!-- prefix 前缀 -->
+                <span
+                  v-if="item.prefix"
+                  class="mr-1 text-3xl font-medium text-gray-600"
+                >
+                  {{ item.prefix }}
+                </span>
+                <!-- 数字动画 -->
+                <VbenCountToAnimator
+                  :end-val="item.value"
+                  :start-val="1"
+                  class="text-3xl font-bold text-gray-900"
+                  prefix=""
+                />
+              </div>
+            </div>
+
+            <!-- 右侧：环比增长率图标和数值 -->
+            <div
+              v-if="item.showGrowthRate && item.totalValue !== undefined"
+              class="flex items-center space-x-2 rounded-lg bg-gray-50 px-3 py-2"
+            >
+              <IconifyIcon
+                :icon="
+                  calculateGrowthRate(item.value, item.totalValue).isPositive
+                    ? 'lucide:trending-up'
+                    : 'lucide:trending-down'
+                "
+                class="size-5"
+                :class="[
+                  calculateGrowthRate(item.value, item.totalValue).isPositive
+                    ? 'text-green-500'
+                    : 'text-red-500',
+                ]"
+              />
+              <span
+                class="text-sm font-semibold"
+                :class="[
+                  calculateGrowthRate(item.value, item.totalValue).isPositive
+                    ? 'text-green-500'
+                    : 'text-red-500',
+                ]"
+              >
+                {{
+                  calculateGrowthRate(item.value, item.totalValue).isPositive
+                    ? '+'
+                    : '-'
+                }}{{
+                  formatGrowthRate(
+                    calculateGrowthRate(item.value, item.totalValue).rate,
+                  )
+                }}%
+              </span>
+            </div>
+          </div>
+        </template>
+        <template #footer v-if="item.totalTitle">
+          <div class="flex items-center justify-between">
+            <span>{{ item.totalTitle }}</span>
+            <VbenCountToAnimator
+              :end-val="item.totalValue"
+              :start-val="1"
+              prefix=""
+            />
+          </div>
+        </template>
+      </el-card>
+    </template>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 移除 el-card header 的下边框 */
+:deep(.el-card__header) {
+  padding-bottom: 16px;
+  border-bottom: none !important;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/home/components/analysis-trade-overview.vue b/apps/web-ele/src/views/mall/home/components/analysis-trade-overview.vue
new file mode 100644
index 00000000..b188a9d2
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/analysis-trade-overview.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { AnalysisOverviewTradeItem } from './data';
+
+import { computed } from 'vue';
+
+import { CountTo } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+interface Props {
+  items?: AnalysisOverviewTradeItem[];
+  modelValue?: AnalysisOverviewTradeItem[];
+  columnsNumber?: number;
+}
+
+defineOptions({
+  name: 'AnalysisOverview',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  modelValue: () => [],
+  columnsNumber: 4,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const itemsData = computed({
+  get: () => (props.modelValue?.length ? props.modelValue : props.items),
+  set: (value) => emit('update:modelValue', value),
+});
+
+// 计算动态的grid列数类名
+const gridColumnsClass = computed(() => {
+  const colNum = props.columnsNumber;
+  return {
+    'lg:grid-cols-1': colNum === 1,
+    'lg:grid-cols-2': colNum === 2,
+    'lg:grid-cols-3': colNum === 3,
+    'lg:grid-cols-4': colNum === 4,
+    'lg:grid-cols-5': colNum === 5,
+    'lg:grid-cols-6': colNum === 6,
+  };
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2" :class="gridColumnsClass">
+    <template v-for="item in itemsData" :key="item.title">
+      <div class="flex flex-col gap-2 bg-[var(--el-bg-color-overlay)] p-6">
+        <div class="flex items-center justify-between text-gray-500">
+          <span>{{ item.title }}</span>
+          <el-tooltip
+            :content="item.tooltip"
+            placement="top-start"
+            v-if="item.tooltip"
+          >
+            <IconifyIcon icon="ep:warning" />
+          </el-tooltip>
+        </div>
+        <div class="mb-4 text-3xl">
+          <CountTo
+            :prefix="item.prefix"
+            :end-val="item.value"
+            :decimals="item.decimals"
+          />
+        </div>
+        <div class="flex flex-row gap-1 text-sm">
+          <span class="text-gray-500">环比</span>
+          <span
+            class="flex items-center gap-0.5 whitespace-nowrap"
+            :class="
+              Number(item.percent) > 0 ? 'text-red-500' : 'text-green-500'
+            "
+          >
+            <span>{{ Math.abs(Number(item.percent)) }}%</span>
+            <IconifyIcon
+              :icon="
+                Number(item.percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'
+              "
+              class="flex-shrink-0 !text-sm"
+            />
+          </span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/components/data.ts b/apps/web-ele/src/views/mall/home/components/data.ts
new file mode 100644
index 00000000..021a20e5
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/data.ts
@@ -0,0 +1,39 @@
+export interface WorkbenchQuickDataShowItem {
+  name: string;
+  value: number;
+  prefix: string;
+  decimals: number;
+  routerName: string;
+}
+
+export interface AnalysisOverviewItem {
+  title: string;
+  totalTitle?: string;
+  totalValue?: number;
+  value: number;
+  prefix?: string;
+  tooltip?: string;
+  // 环比增长相关字段
+  showGrowthRate?: boolean; // 是否显示环比增长率，默认为false
+}
+
+export interface AnalysisOverviewIconItem {
+  icon: string;
+  title: string;
+  value: number;
+  prefix?: string;
+  iconBgColor: string;
+  iconColor: string;
+  tooltip?: string;
+  decimals?: number;
+  percent?: number;
+}
+
+export interface AnalysisOverviewTradeItem {
+  title: string;
+  value: number;
+  prefix?: string;
+  decimals?: number;
+  percent?: number;
+  tooltip?: string;
+}
diff --git a/apps/web-ele/src/views/mall/home/components/member-funnel-card.vue b/apps/web-ele/src/views/mall/home/components/member-funnel-card.vue
new file mode 100644
index 00000000..089e507a
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/member-funnel-card.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+
+import { ref } from 'vue';
+
+import { calculateRelativeRate, fenToYuan } from '@vben/utils';
+
+import dayjs from 'dayjs';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+
+import AnalysisChartCard from './analysis-chart-card.vue';
+import ShortcutDateRangePicker from './shortcut-date-range-picker.vue';
+
+/** 会员概览卡片 */
+defineOptions({ name: 'MemberFunnelCard' });
+
+const loading = ref(true); // 加载中
+const analyseData = ref<MallMemberStatisticsApi.Analyse>(); // 会员分析数据
+
+/** 查询会员概览数据列表 */
+const handleTimeRangeChange = async (
+  times: [dayjs.ConfigType, dayjs.ConfigType],
+) => {
+  loading.value = true;
+  // 查询数据
+  analyseData.value = await MemberStatisticsApi.getMemberAnalyse({
+    times: [dayjs(times[0]).toDate(), dayjs(times[1]).toDate()],
+  });
+  loading.value = false;
+};
+</script>
+<template>
+  <AnalysisChartCard title="会员概览">
+    <template #header-suffix>
+      <!-- 查询条件 -->
+      <ShortcutDateRangePicker @change="handleTimeRangeChange" />
+    </template>
+    <template #default>
+      <div class="min-w-225 py-1.75" v-loading="loading">
+        <div class="relative flex h-24">
+          <div class="<lg:w-35% <xl:w-55% h-full w-3/4 bg-blue-50">
+            <div class="ml-15 flex h-full flex-col justify-center">
+              <div class="font-bold">
+                注册用户数量：{{
+                  analyseData?.comparison?.value?.registerUserCount || 0
+                }}
+              </div>
+              <div class="text-3.5 mt-2">
+                环比增长率：{{
+                  calculateRelativeRate(
+                    analyseData?.comparison?.value?.registerUserCount,
+                    analyseData?.comparison?.reference?.registerUserCount,
+                  )
+                }}%
+              </div>
+            </div>
+          </div>
+          <div
+            class="trapezoid1 text-3.5 flex h-full flex-col items-center justify-center bg-blue-500 text-white"
+          >
+            <span class="text-6 font-bold">{{
+              analyseData?.visitUserCount || 0
+            }}</span>
+            <span>访客</span>
+          </div>
+        </div>
+        <div class="relative flex h-24">
+          <div class="<lg:w-35% <xl:w-55% flex h-full w-3/4 bg-cyan-50">
+            <div class="ml-15 flex h-full flex-col justify-center">
+              <div class="font-bold">
+                活跃用户数量：{{
+                  analyseData?.comparison?.value?.visitUserCount || 0
+                }}
+              </div>
+              <div class="text-3.5 mt-2">
+                环比增长率：{{
+                  calculateRelativeRate(
+                    analyseData?.comparison?.value?.visitUserCount,
+                    analyseData?.comparison?.reference?.visitUserCount,
+                  )
+                }}%
+              </div>
+            </div>
+          </div>
+          <div
+            class="trapezoid2 flex flex-col items-center justify-center bg-cyan-500 text-white"
+          >
+            <span class="text-6 font-bold">{{
+              analyseData?.orderUserCount || 0
+            }}</span>
+            <span>下单</span>
+          </div>
+        </div>
+        <div class="relative flex h-24">
+          <div class="<lg:w-35% <xl:w-55% flex w-3/4 bg-slate-50">
+            <div class="ml-15 flex h-full flex-row gap-x-16">
+              <div class="flex flex-col justify-center">
+                <div class="font-bold">
+                  充值用户数量：{{
+                    analyseData?.comparison?.value?.rechargeUserCount || 0
+                  }}
+                </div>
+                <div class="text-3.5 mt-2">
+                  环比增长率：{{
+                    calculateRelativeRate(
+                      analyseData?.comparison?.value?.rechargeUserCount,
+                      analyseData?.comparison?.reference?.rechargeUserCount,
+                    )
+                  }}%
+                </div>
+              </div>
+              <div class="flex flex-col justify-center">
+                <div class="font-bold">
+                  客单价：{{ fenToYuan(analyseData?.atv || 0) }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="trapezoid3 flex flex-col items-center justify-center bg-slate-500 text-white"
+          >
+            <span class="text-6 font-bold">{{
+              analyseData?.payUserCount || 0
+            }}</span>
+            <span>成交用户</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </AnalysisChartCard>
+</template>
+<style lang="scss" scoped>
+.trapezoid1 {
+  z-index: 1;
+  width: 19.25rem;
+  margin-top: 0.381rem;
+  margin-left: -9.625rem;
+  font-size: 0.875rem;
+  transform: perspective(5em) rotateX(-11deg);
+}
+
+.trapezoid2 {
+  z-index: 1;
+  width: 14rem;
+  height: 6.25rem;
+  margin-top: 0.425rem;
+  margin-left: -7rem;
+  font-size: 0.875rem;
+  transform: perspective(7em) rotateX(-20deg);
+}
+
+.trapezoid3 {
+  z-index: 1;
+  width: 9rem;
+  height: 5.75rem;
+  margin-top: 0.8125rem;
+  margin-left: -4.5rem;
+  font-size: 0.875rem;
+  transform: perspective(3em) rotateX(-13deg);
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/home/components/member-statistics-card.vue b/apps/web-ele/src/views/mall/home/components/member-statistics-card.vue
new file mode 100644
index 00000000..603e9bbc
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/member-statistics-card.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { formatDate } from '@vben/utils';
+
+import dayjs from 'dayjs';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+
+/** 会员用户统计卡片 */
+defineOptions({ name: 'MemberStatisticsCard' });
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+const loading = ref(true); // 加载中
+/** 折线图配置 */
+const lineChartOptions = reactive({
+  dataset: {
+    dimensions: ['date', 'count'],
+    source: [] as any[],
+  },
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true,
+  },
+  legend: {
+    top: 50,
+  },
+  series: [{ name: '注册量', type: 'line', smooth: true, areaStyle: {} }],
+  toolbox: {
+    feature: {
+      // 数据区域缩放
+      dataZoom: {
+        yAxisIndex: false, // Y轴不缩放
+      },
+      brush: {
+        type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
+      },
+      saveAsImage: { show: true, name: '会员统计' }, // 保存为图片
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+    },
+    padding: [5, 10],
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      formatter: (date: string) => formatDate(date, 'MM-DD'),
+    },
+  },
+  yAxis: {
+    axisTick: {
+      show: false,
+    },
+  },
+});
+
+const getMemberRegisterCountList = async () => {
+  loading.value = true;
+  // 查询最近一月数据
+  const beginTime = dayjs().subtract(30, 'd').startOf('d');
+  const endTime = dayjs().endOf('d');
+  const list = await MemberStatisticsApi.getMemberRegisterCountList(
+    beginTime.toDate(),
+    endTime.toDate(),
+  );
+  // 更新 Echarts 数据
+  if (lineChartOptions.dataset && lineChartOptions.dataset.source) {
+    lineChartOptions.dataset.source = list;
+  }
+  loading.value = false;
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await getMemberRegisterCountList();
+  renderEcharts(lineChartOptions as any);
+});
+</script>
+<template>
+  <AnalysisChartCard title="用户统计">
+    <!-- 折线图 -->
+    <EchartsUI ref="chartRef" />
+  </AnalysisChartCard>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/components/member-terminal-card.vue b/apps/web-ele/src/views/mall/home/components/member-terminal-card.vue
new file mode 100644
index 00000000..6631ef7b
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/member-terminal-card.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+import type { DictDataType } from '#/utils/dict';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
+
+/** 会员终端卡片 */
+defineOptions({ name: 'MemberTerminalCard' });
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+const loading = ref(true); // 加载中
+
+/** 会员终端统计图配置 */
+const terminalChartOptions = reactive({
+  tooltip: {
+    trigger: 'item' as const,
+    confine: true,
+    formatter: '{a} <br/>{b} : {c} ({d}%)',
+  },
+  legend: {
+    orient: 'vertical' as const,
+    left: 'right' as const,
+  },
+  roseType: 'area',
+  series: [
+    {
+      name: '会员终端',
+      type: 'pie' as const,
+      label: {
+        show: false,
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [] as { name: string; value: number }[],
+    },
+  ],
+});
+
+/** 按照终端，查询会员统计列表 */
+const getMemberTerminalStatisticsList = async () => {
+  loading.value = true;
+  const list = await MemberStatisticsApi.getMemberTerminalStatisticsList();
+  const dictDataList = getIntDictOptions(DICT_TYPE.TERMINAL);
+  if (terminalChartOptions.series && terminalChartOptions.series.length > 0) {
+    (terminalChartOptions.series[0] as any).data = dictDataList.map(
+      (dictData: DictDataType) => {
+        const userCount = list.find(
+          (item: MallMemberStatisticsApi.TerminalStatistics) =>
+            item.terminal === dictData.value,
+        )?.userCount;
+        return {
+          name: dictData.label,
+          value: userCount || 0,
+        };
+      },
+    );
+  }
+  loading.value = false;
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await getMemberTerminalStatisticsList();
+  renderEcharts(terminalChartOptions);
+});
+</script>
+<template>
+  <AnalysisChartCard title="会员终端">
+    <EchartsUI ref="chartRef" />
+  </AnalysisChartCard>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/components/shortcut-date-range-picker.vue b/apps/web-ele/src/views/mall/home/components/shortcut-date-range-picker.vue
new file mode 100644
index 00000000..a8431d5c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/shortcut-date-range-picker.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import * as DateUtil from '@vben/utils';
+
+import dayjs from 'dayjs';
+
+/** 快捷日期范围选择组件 */
+defineOptions({ name: 'ShortcutDateRangePicker' });
+
+/** 触发事件：时间范围选中 */
+const emits = defineEmits<{
+  (e: 'change', times: [dayjs.ConfigType, dayjs.ConfigType]): void;
+}>();
+const shortcutDays = ref(7); // 日期快捷天数（单选按钮组）, 默认7天
+const times = ref<[string, string]>(['', '']); // 时间范围参数
+defineExpose({ times }); // 暴露时间范围参数
+/** 日期快捷选择 */
+const shortcuts = [
+  {
+    text: '昨天',
+    value: () => DateUtil.getDayRange(new Date(), -1),
+  },
+  {
+    text: '最近7天',
+    value: () => DateUtil.getLast7Days(),
+  },
+  {
+    text: '本月',
+    value: () => [dayjs().startOf('M'), dayjs().subtract(1, 'd')],
+  },
+  {
+    text: '最近30天',
+    value: () => DateUtil.getLast30Days(),
+  },
+  {
+    text: '最近1年',
+    value: () => DateUtil.getLast1Year(),
+  },
+];
+
+/** 设置时间范围 */
+function setTimes() {
+  const beginDate = dayjs().subtract(shortcutDays.value, 'd');
+  const yesterday = dayjs().subtract(1, 'd');
+  times.value = DateUtil.getDateRange(beginDate, yesterday);
+}
+
+/** 快捷日期单选按钮选中 */
+const handleShortcutDaysChange = async () => {
+  // 设置时间范围
+  setTimes();
+  // 发送时间范围选中事件
+  await emitDateRangePicker();
+};
+
+/** 触发时间范围选中事件 */
+const emitDateRangePicker = async () => {
+  emits('change', times.value);
+};
+
+/** 初始化 */
+onMounted(() => {
+  handleShortcutDaysChange();
+});
+</script>
+<template>
+  <div class="flex flex-row items-center gap-2">
+    <el-radio-group v-model="shortcutDays" @change="handleShortcutDaysChange">
+      <el-radio-button :value="1">昨天</el-radio-button>
+      <el-radio-button :value="7">最近7天</el-radio-button>
+      <el-radio-button :value="30">最近30天</el-radio-button>
+    </el-radio-group>
+    <el-date-picker
+      v-model="times"
+      value-format="YYYY-MM-DD HH:mm:ss"
+      type="daterange"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+      :shortcuts="shortcuts"
+      class="!w-240px"
+      @change="emitDateRangePicker"
+    />
+    <slot></slot>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/components/trade-trend-card.vue b/apps/web-ele/src/views/mall/home/components/trade-trend-card.vue
new file mode 100644
index 00000000..8c2b2b69
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/trade-trend-card.vue
@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { fenToYuan, formatDate } from '@vben/utils';
+
+import dayjs, { Dayjs } from 'dayjs';
+
+import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { TimeRangeTypeEnum } from '#/utils/constants';
+
+/** 交易量趋势 */
+defineOptions({ name: 'TradeTrendCard' });
+
+const timeRangeType = ref(TimeRangeTypeEnum.DAY30); // 日期快捷选择按钮, 默认30天
+const loading = ref(true); // 加载中
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+// 时间范围 Map
+const timeRange = new Map()
+  .set(TimeRangeTypeEnum.DAY30, {
+    name: '30天',
+    series: [
+      { name: '订单金额', type: 'bar', smooth: true, data: [] },
+      { name: '订单数量', type: 'line', smooth: true, data: [] },
+    ],
+  })
+  .set(TimeRangeTypeEnum.WEEK, {
+    name: '周',
+    series: [
+      { name: '上周金额', type: 'bar', smooth: true, data: [] },
+      { name: '本周金额', type: 'bar', smooth: true, data: [] },
+      { name: '上周数量', type: 'line', smooth: true, data: [] },
+      { name: '本周数量', type: 'line', smooth: true, data: [] },
+    ],
+  })
+  .set(TimeRangeTypeEnum.MONTH, {
+    name: '月',
+    series: [
+      { name: '上月金额', type: 'bar', smooth: true, data: [] },
+      { name: '本月金额', type: 'bar', smooth: true, data: [] },
+      { name: '上月数量', type: 'line', smooth: true, data: [] },
+      { name: '本月数量', type: 'line', smooth: true, data: [] },
+    ],
+  })
+  .set(TimeRangeTypeEnum.YEAR, {
+    name: '年',
+    series: [
+      { name: '去年金额', type: 'bar', smooth: true, data: [] },
+      { name: '今年金额', type: 'bar', smooth: true, data: [] },
+      { name: '去年数量', type: 'line', smooth: true, data: [] },
+      { name: '今年数量', type: 'line', smooth: true, data: [] },
+    ],
+  });
+/** 图表配置 */
+const eChartOptions = reactive({
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true,
+  },
+  legend: {
+    top: 50,
+    data: [] as string[],
+  },
+  series: [] as any[],
+  toolbox: {
+    feature: {
+      // 数据区域缩放
+      dataZoom: {
+        yAxisIndex: false, // Y轴不缩放
+      },
+      brush: {
+        type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
+      },
+      saveAsImage: { show: true, name: '订单量趋势' }, // 保存为图片
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+    },
+    padding: [5, 10],
+  },
+  xAxis: {
+    type: 'category' as const,
+    inverse: true,
+    boundaryGap: false,
+    axisTick: {
+      show: false,
+    },
+    data: [] as string[],
+    axisLabel: {
+      formatter: (date: string) => {
+        switch (timeRangeType.value) {
+          case TimeRangeTypeEnum.DAY30: {
+            return formatDate(date, 'MM-DD');
+          }
+          case TimeRangeTypeEnum.MONTH: {
+            return formatDate(date, 'D');
+          }
+          case TimeRangeTypeEnum.WEEK: {
+            let weekDay = formatDate(date, 'ddd');
+            if (weekDay === '0') weekDay = '日';
+            return `周${weekDay}`;
+          }
+          case TimeRangeTypeEnum.YEAR: {
+            return `${formatDate(date, 'M')}月`;
+          }
+          default: {
+            return date;
+          }
+        }
+      },
+    },
+  },
+  yAxis: {
+    axisTick: {
+      show: false,
+    },
+  },
+});
+
+/** 时间范围类型单选按钮选中 */
+const handleTimeRangeTypeChange = async () => {
+  // 设置时间范围
+  let beginTime: Dayjs;
+  let endTime: Dayjs;
+  switch (timeRangeType.value) {
+    case TimeRangeTypeEnum.MONTH: {
+      beginTime = dayjs().startOf('month');
+      endTime = dayjs().endOf('month');
+      break;
+    }
+    case TimeRangeTypeEnum.WEEK: {
+      beginTime = dayjs().startOf('week');
+      endTime = dayjs().endOf('week');
+      break;
+    }
+    case TimeRangeTypeEnum.YEAR: {
+      beginTime = dayjs().startOf('year');
+      endTime = dayjs().endOf('year');
+      break;
+    }
+    default: {
+      beginTime = dayjs().subtract(30, 'day').startOf('d');
+      endTime = dayjs().endOf('d');
+      break;
+    }
+  }
+  // 发送时间范围选中事件
+  await getOrderCountTrendComparison(beginTime, endTime);
+};
+
+/** 查询订单数量趋势对照数据 */
+const getOrderCountTrendComparison = async (
+  beginTime: dayjs.ConfigType,
+  endTime: dayjs.ConfigType,
+) => {
+  loading.value = true;
+  // 查询数据
+  const list = await TradeStatisticsApi.getOrderCountTrendComparison(
+    timeRangeType.value,
+    dayjs(beginTime).toDate(),
+    dayjs(endTime).toDate(),
+  );
+  // 处理数据
+  const dates: string[] = [];
+  const series = [...timeRange.get(timeRangeType.value).series];
+  for (const item of list) {
+    dates.push(item.value.date);
+    if (series.length === 2) {
+      series[0].data.push(fenToYuan(item?.value?.orderPayPrice || 0)); // 当前金额
+      series[1].data.push(item?.value?.orderPayCount || 0); // 当前数量
+    } else {
+      series[0].data.push(fenToYuan(item?.reference?.orderPayPrice || 0)); // 对照金额
+      series[1].data.push(fenToYuan(item?.value?.orderPayPrice || 0)); // 当前金额
+      series[2].data.push(item?.reference?.orderPayCount || 0); // 对照数量
+      series[3].data.push(item?.value?.orderPayCount || 0); // 当前数量
+    }
+  }
+  eChartOptions.xAxis!.data = dates;
+  eChartOptions.series = series;
+  // legend在4个切换到2个的时候，还是显示成4个，需要手动配置一下
+  eChartOptions.legend.data = series.map((item) => item.name);
+  loading.value = false;
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await handleTimeRangeTypeChange();
+  renderEcharts(eChartOptions as any);
+});
+</script>
+<template>
+  <AnalysisChartCard title="交易量趋势">
+    <template #header-suffix>
+      <div class="flex flex-row items-center justify-between">
+        <!-- 查询条件 -->
+        <div class="flex flex-row items-center gap-2">
+          <el-radio-group
+            v-model="timeRangeType"
+            @change="handleTimeRangeTypeChange"
+          >
+            <el-radio-button
+              v-for="[key, value] in timeRange.entries()"
+              :key="key"
+              :value="key"
+            >
+              {{ value.name }}
+            </el-radio-button>
+          </el-radio-group>
+        </div>
+      </div>
+    </template>
+    <!-- 折线图 -->
+    <EchartsUI ref="chartRef" />
+  </AnalysisChartCard>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/components/workbench-quick-data-show.vue b/apps/web-ele/src/views/mall/home/components/workbench-quick-data-show.vue
new file mode 100644
index 00000000..3d55ccb8
--- /dev/null
+++ b/apps/web-ele/src/views/mall/home/components/workbench-quick-data-show.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { WorkbenchQuickDataShowItem } from './data';
+
+import { computed } from 'vue';
+
+import { CountTo } from '@vben/common-ui';
+
+interface Props {
+  items?: WorkbenchQuickDataShowItem[];
+  modelValue?: WorkbenchQuickDataShowItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchQuickDataShow',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  modelValue: () => [],
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+// 使用计算属性实现双向绑定
+const itemsData = computed({
+  get: () => (props.modelValue?.length ? props.modelValue : props.items),
+  set: (value) => {
+    emit('update:modelValue', value);
+  },
+});
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <!--      <CardTitle class="text-lg " >{{ title }}</CardTitle>-->
+      <div class="text-lg font-semibold">{{ title }}</div>
+    </template>
+    <template #default>
+      <div class="flex flex-wrap p-0">
+        <div
+          v-for="(item, index) in itemsData"
+          :key="item.name"
+          :class="{
+            'border-r-0': index % 4 === 3,
+            'border-b-0': index < 4,
+            'pb-4': index > 4,
+            'rounded-bl-xl': index === itemsData.length - 4,
+            'rounded-br-xl': index === itemsData.length - 1,
+          }"
+          class="flex-col-center group w-1/4 cursor-pointer py-9"
+        >
+          <div class="mb-2 flex justify-center">
+            <CountTo
+              :prefix="item.prefix || ''"
+              :end-val="Number(item.value)"
+              :decimals="item.decimals || 0"
+              class="text-4xl font-normal"
+            />
+          </div>
+          <span class="truncate text-base text-gray-500">{{ item.name }}</span>
+        </div>
+      </div>
+    </template>
+    <!--    <CardContent class="flex flex-wrap p-0">-->
+    <!--      <template>-->
+    <!--        -->
+    <!--      </template>-->
+    <!--    </CardContent>-->
+  </el-card>
+</template>
diff --git a/apps/web-ele/src/views/mall/home/index.vue b/apps/web-ele/src/views/mall/home/index.vue
index 21b6279b..3ebbe281 100644
--- a/apps/web-ele/src/views/mall/home/index.vue
+++ b/apps/web-ele/src/views/mall/home/index.vue
@@ -1,29 +1,30 @@
 <script lang="ts" setup>
 import type {
-  AnalysisOverviewItem,
   WorkbenchProjectItem,
   WorkbenchQuickNavItem,
 } from '@vben/common-ui';
 
+import type { AnalysisOverviewItem } from './components/data';
+
+import type { WorkbenchQuickDataShowItem } from '#/views/mall/home/components/data';
+
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import {
-  AnalysisOverview,
-  DocAlert,
-  Page,
-  WorkbenchQuickNav,
-} from '@vben/common-ui';
-import {
-  SvgBellIcon,
-  SvgCakeIcon,
-  SvgCardIcon,
-  SvgDownloadIcon,
-} from '@vben/icons';
+import { DocAlert, Page, WorkbenchQuickNav } from '@vben/common-ui';
 import { isString, openWindow } from '@vben/utils';
 
+import { getTabsCount } from '#/api/mall/product/spu';
 import { getUserCountComparison } from '#/api/mall/statistics/member';
-import { getOrderComparison } from '#/api/mall/statistics/trade';
+import { getWalletRechargePrice } from '#/api/mall/statistics/pay';
+import { getOrderComparison, getOrderCount } from '#/api/mall/statistics/trade';
+
+import AnalysisOverview from './components/analysis-overview.vue';
+import MemberFunnelCard from './components/member-funnel-card.vue';
+import MemberStatisticsCard from './components/member-statistics-card.vue';
+import MemberTerminalCard from './components/member-terminal-card.vue';
+import TradeTrendCard from './components/trade-trend-card.vue';
+import WorkbenchQuickDataShow from './components/workbench-quick-data-show.vue';
 
 /** 商城首页 */
 defineOptions({ name: 'MallHome' });
@@ -31,6 +32,18 @@ defineOptions({ name: 'MallHome' });
 const loading = ref(true); // 加载中
 const orderComparison = ref(); // 交易对照数据
 const userComparison = ref(); // 用户对照数据
+const data = ref({
+  orderUndelivered: 0,
+  orderAfterSaleApply: 0,
+  orderWaitePickUp: 0,
+  withdrawAuditing: 0,
+  productForSale: 0,
+  productInWarehouse: 0,
+  productAlertStock: 0,
+  rechargePrice: 0,
+});
+
+const dataShow = ref(false);
 
 /** 查询交易对照卡片数据 */
 const getOrder = async () => {
@@ -42,43 +55,87 @@ const getUserCount = async () => {
   userComparison.value = await getUserCountComparison();
 };
 
+/** 查询订单数据 */
+const getOrderData = async () => {
+  const orderCount = await getOrderCount();
+  if (orderCount.undelivered) {
+    data.value.orderUndelivered = orderCount.undelivered;
+  }
+  if (orderCount.afterSaleApply) {
+    data.value.orderAfterSaleApply = orderCount.afterSaleApply;
+  }
+  if (orderCount.pickUp) {
+    data.value.orderWaitePickUp = orderCount.pickUp;
+  }
+  if (orderCount.auditingWithdraw) {
+    data.value.withdrawAuditing = orderCount.auditingWithdraw;
+  }
+};
+
+/** 查询商品数据 */
+const getProductData = async () => {
+  // TODO: @芋艿：这个接口的返回值，是不是用命名字段更好些？
+  const productCount = await getTabsCount();
+  data.value.productForSale = productCount['0'] || 0;
+  data.value.productInWarehouse = productCount['1'] || 0;
+  data.value.productAlertStock = productCount['3'] || 0;
+};
+
+/** 查询钱包充值数据 */
+const getWalletRechargeData = async () => {
+  const paySummary = await getWalletRechargePrice();
+  data.value.rechargePrice = paySummary.rechargePrice;
+};
+
 /** 初始化 */
 onMounted(async () => {
   loading.value = true;
-  await Promise.all([getOrder(), getUserCount()]);
+  await Promise.all([
+    getOrder(),
+    getUserCount(),
+    getOrderData(),
+    getProductData(),
+    getWalletRechargeData(),
+  ]);
   loading.value = false;
+  dataShow.value = true;
+  loadDataShow();
+  loadOverview();
 });
 
-const overviewItems: AnalysisOverviewItem[] = [
-  {
-    icon: SvgCardIcon,
-    title: '今日销售额',
-    totalTitle: '昨日数据',
-    totalValue: orderComparison.value?.reference?.orderPayPrice || 0,
-    value: orderComparison.value?.orderPayPrice || 0,
-  },
-  {
-    icon: SvgCakeIcon,
-    title: '今日用户访问量',
-    totalTitle: '总访问量',
-    totalValue: userComparison.value?.reference?.visitUserCount || 0,
-    value: userComparison.value?.visitUserCount || 0,
-  },
-  {
-    icon: SvgDownloadIcon,
-    title: '今日订单量',
-    totalTitle: '总订单量',
-    totalValue: orderComparison.value?.orderPayCount || 0,
-    value: orderComparison.value?.reference?.orderPayCount || 0,
-  },
-  {
-    icon: SvgBellIcon,
-    title: '今日会员注册量',
-    totalTitle: '总会员注册量',
-    totalValue: userComparison.value?.registerUserCount || 0,
-    value: userComparison.value?.reference?.registerUserCount || 0,
-  },
-];
+const overviewItems = ref<AnalysisOverviewItem[]>([]);
+const loadOverview = () => {
+  overviewItems.value = [
+    {
+      title: '今日销售额',
+      totalTitle: '昨日数据',
+      totalValue: orderComparison.value?.reference?.orderPayPrice || 0,
+      value: orderComparison.value?.orderPayPrice || 0,
+      showGrowthRate: true,
+    },
+    {
+      title: '今日用户访问量',
+      totalTitle: '总访问量',
+      totalValue: userComparison.value?.reference?.visitUserCount || 0,
+      value: userComparison.value?.visitUserCount || 0,
+      showGrowthRate: true,
+    },
+    {
+      title: '今日订单量',
+      totalTitle: '总订单量',
+      totalValue: orderComparison.value?.orderPayCount || 0,
+      value: orderComparison.value?.reference?.orderPayCount || 0,
+      showGrowthRate: true,
+    },
+    {
+      title: '今日会员注册量',
+      totalTitle: '总会员注册量',
+      totalValue: userComparison.value?.registerUserCount || 0,
+      value: userComparison.value?.reference?.registerUserCount || 0,
+      showGrowthRate: true,
+    },
+  ];
+};
 
 // 同样，这里的 url 也可以使用以 http 开头的外部链接
 const quickNavItems: WorkbenchQuickNavItem[] = [
@@ -138,6 +195,69 @@ const quickNavItems: WorkbenchQuickNavItem[] = [
   },
 ];
 
+const quickDataShowItems = ref<WorkbenchQuickDataShowItem[]>();
+
+const loadDataShow = () => {
+  quickDataShowItems.value = [
+    {
+      name: '待发货订单',
+      value: data.value.orderUndelivered,
+      prefix: '',
+      decimals: 0,
+      routerName: 'TradeOrder',
+    },
+    {
+      name: '退款中订单',
+      value: data.value.orderAfterSaleApply,
+      prefix: '',
+      decimals: 0,
+      routerName: 'TradeAfterSale',
+    },
+    {
+      name: '待核销订单',
+      value: data.value.orderWaitePickUp,
+      routerName: 'TradeOrder',
+      prefix: '',
+      decimals: 0,
+    },
+    {
+      name: '库存预警',
+      value: data.value.productAlertStock,
+      routerName: 'ProductSpu',
+      prefix: '',
+      decimals: 0,
+    },
+    {
+      name: '上架商品',
+      value: data.value.productForSale,
+      routerName: 'ProductSpu',
+      prefix: '',
+      decimals: 0,
+    },
+    {
+      name: '仓库商品',
+      value: data.value.productInWarehouse,
+      routerName: 'ProductSpu',
+      prefix: '',
+      decimals: 0,
+    },
+    {
+      name: '提现待审核',
+      value: data.value.withdrawAuditing,
+      routerName: 'TradeBrokerageWithdraw',
+      prefix: '',
+      decimals: 0,
+    },
+    {
+      name: '账户充值',
+      value: data.value.rechargePrice,
+      prefix: '￥',
+      decimals: 2,
+      routerName: 'PayWalletRecharge',
+    },
+  ];
+};
+
 const router = useRouter();
 function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
   if (nav.url?.startsWith('http')) {
@@ -164,14 +284,35 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
         url="https://doc.iocoder.cn/mall/build/"
       />
     </template>
-    <AnalysisOverview :items="overviewItems" />
-    <div class="mt-5 w-full lg:w-2/5">
+    <div class="mt-5 w-full md:flex">
+      <AnalysisOverview
+        v-model:model-value="overviewItems"
+        class="mt-5 md:mr-4 md:mt-0 md:w-full"
+      />
+    </div>
+    <div class="mt-5 w-full md:flex">
       <WorkbenchQuickNav
         :items="quickNavItems"
-        class="mt-5 lg:mt-0"
+        class="mt-5 md:mr-4 md:mt-0 md:w-1/2"
         title="快捷导航"
         @click="navTo"
       />
+      <WorkbenchQuickDataShow
+        v-if="dataShow"
+        v-model:model-value="quickDataShowItems"
+        title="运营数据"
+        class="mt-5 md:mr-4 md:mt-0 md:w-1/2"
+      />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <MemberFunnelCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
+      <MemberTerminalCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <TradeTrendCard class="mt-5 md:mr-4 md:mt-0 md:w-full" />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <MemberStatisticsCard class="mt-5 md:mr-4 md:mt-0 md:w-full" />
     </div>
   </Page>
 </template>
diff --git a/apps/web-ele/src/views/mall/product/brand/index.vue b/apps/web-ele/src/views/mall/product/brand/index.vue
index 709b2aeb..ef43eef4 100644
--- a/apps/web-ele/src/views/mall/product/brand/index.vue
+++ b/apps/web-ele/src/views/mall/product/brand/index.vue
@@ -4,7 +4,7 @@ import type { MallBrandApi } from '#/api/mall/product/brand';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteBrand, getBrandPage } from '#/api/mall/product/brand';
@@ -35,17 +35,15 @@ function handleEdit(row: MallBrandApi.Brand) {
 
 /** 删除品牌 */
 async function handleDelete(row: MallBrandApi.Brand) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  // 二次确认
+  await ElMessageBox.confirm('确定删除该品牌吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteBrand(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteBrand(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/mall/product/category/index.vue b/apps/web-ele/src/views/mall/product/category/index.vue
index 7458bc5b..c71dc0ed 100644
--- a/apps/web-ele/src/views/mall/product/category/index.vue
+++ b/apps/web-ele/src/views/mall/product/category/index.vue
@@ -7,7 +7,7 @@ import { useRouter } from 'vue-router';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteCategory, getCategoryList } from '#/api/mall/product/category';
@@ -52,17 +52,14 @@ const handleViewSpu = (id: number) => {
 
 /** 删除分类 */
 async function handleDelete(row: MallCategoryApi.Category) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定删除该分类吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteCategory(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteCategory(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 切换树形展开/收缩状态 */
diff --git a/apps/web-ele/src/views/mall/product/property/modules/property-grid.vue b/apps/web-ele/src/views/mall/product/property/modules/property-grid.vue
index 6aaea656..067fed48 100644
--- a/apps/web-ele/src/views/mall/product/property/modules/property-grid.vue
+++ b/apps/web-ele/src/views/mall/product/property/modules/property-grid.vue
@@ -7,7 +7,7 @@ import type { MallPropertyApi } from '#/api/mall/product/property';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteProperty, getPropertyPage } from '#/api/mall/product/property';
@@ -40,17 +40,14 @@ function handleEdit(row: any) {
 
 /** 删除属性 */
 async function handleDelete(row: MallPropertyApi.Property) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定删除该属性吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteProperty(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteProperty(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 表格事件 */
diff --git a/apps/web-ele/src/views/mall/product/property/modules/value-grid.vue b/apps/web-ele/src/views/mall/product/property/modules/value-grid.vue
index c17eb3a9..2f4d4424 100644
--- a/apps/web-ele/src/views/mall/product/property/modules/value-grid.vue
+++ b/apps/web-ele/src/views/mall/product/property/modules/value-grid.vue
@@ -6,7 +6,7 @@ import { watch } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -47,17 +47,14 @@ function handleEdit(row: MallPropertyApi.PropertyValue) {
 
 /** 删除字典数据 */
 async function handleDelete(row: MallPropertyApi.PropertyValue) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定删除该属性值吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deletePropertyValue(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deletePropertyValue(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/mall/product/spu/components/delivery-form.vue b/apps/web-ele/src/views/mall/product/spu/components/delivery-form.vue
index c99de0f7..a81a60b2 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/delivery-form.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/delivery-form.vue
@@ -1,14 +1,18 @@
 <script lang="ts" setup>
+import { watch } from 'vue';
+
+import { ElMessage } from 'element-plus';
+
 import { useVbenForm } from '#/adapter/form';
 import * as ExpressTemplateApi from '#/api/mall/trade/delivery/expressTemplate';
-import { watch } from 'vue';
-import { ElMessage } from 'element-plus';
-import { DICT_TYPE, getIntDictOptions, DeliveryTypeEnum } from '#/utils';
+import { DeliveryTypeEnum, DICT_TYPE, getIntDictOptions } from '#/utils';
 
 const props = defineProps<{
   propFormData: Object;
 }>();
 
+const emit = defineEmits(['update:activeName']);
+
 /** 将传进来的值赋值给 formData */
 watch(
   () => props.propFormData,
@@ -20,7 +24,6 @@ watch(
   },
 );
 
-const emit = defineEmits(['update:activeName']);
 const validate = async () => {
   const { valid } = await formApi.validate();
   if (!valid) {
@@ -29,10 +32,10 @@ const validate = async () => {
   try {
     // 校验通过更新数据
     Object.assign(props.propFormData, formApi.getValues());
-  } catch (e) {
+  } catch (error) {
     ElMessage.error('【物流设置】不完善，请填写相关信息');
     emit('update:activeName', 'delivery');
-    throw e; // 目的截断之后的校验
+    throw error; // 目的截断之后的校验
   }
 };
 defineExpose({ validate });
@@ -62,11 +65,8 @@ const [Form, formApi] = useVbenForm({
       component: 'ApiSelect',
       componentProps: {
         api: ExpressTemplateApi.getSimpleTemplateList,
-        props: {
-          label: 'name',
-          value: 'id',
-          children: 'children',
-        },
+        labelField: 'name',
+        valueField: 'id',
       },
       rules: 'required',
       dependencies: {
diff --git a/apps/web-ele/src/views/mall/product/spu/components/info-form.vue b/apps/web-ele/src/views/mall/product/spu/components/info-form.vue
index 81510202..95d9cd41 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/info-form.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/info-form.vue
@@ -1,20 +1,25 @@
 <script lang="ts" setup>
-import { useVbenForm } from '#/adapter/form';
-import { handleTree } from '@vben/utils';
-import * as ProductCategoryApi from '#/api/mall/product/category';
-import * as ProductBrandApi from '#/api/mall/product/brand';
 import { watch } from 'vue';
+
+import { handleTree } from '@vben/utils';
+
 import { ElMessage } from 'element-plus';
 
+import { useVbenForm } from '#/adapter/form';
+import * as ProductBrandApi from '#/api/mall/product/brand';
+import * as ProductCategoryApi from '#/api/mall/product/category';
+
+const props = defineProps<{
+  propFormData: Object;
+}>();
+
+const emit = defineEmits(['update:activeName']);
+
 const getCategoryList = async () => {
   const data = await ProductCategoryApi.getCategorySimpleList();
   return handleTree(data, 'id');
 };
 
-const props = defineProps<{
-  propFormData: Object;
-}>();
-
 /** 将传进来的值赋值给 formData */
 watch(
   () => props.propFormData,
@@ -26,7 +31,6 @@ watch(
   },
 );
 
-const emit = defineEmits(['update:activeName']);
 const validate = async () => {
   const { valid } = await formApi.validate();
   if (!valid) {
@@ -35,10 +39,10 @@ const validate = async () => {
   try {
     // 校验通过更新数据
     Object.assign(props.propFormData, formApi.getValues());
-  } catch (e) {
+  } catch (error) {
     ElMessage.error('【基础设置】不完善，请填写相关信息');
     emit('update:activeName', 'info');
-    throw e; // 目的截断之后的校验
+    throw error; // 目的截断之后的校验
   }
 };
 defineExpose({ validate });
@@ -68,11 +72,9 @@ const [Form, formApi] = useVbenForm({
       component: 'ApiCascader',
       componentProps: {
         api: getCategoryList,
-        props: {
-          label: 'name',
-          value: 'id',
-          children: 'children',
-        },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
       },
       rules: 'required',
     },
diff --git a/apps/web-ele/src/views/mall/product/spu/data.ts b/apps/web-ele/src/views/mall/product/spu/data.ts
index 0d4c0a21..4e23423e 100644
--- a/apps/web-ele/src/views/mall/product/spu/data.ts
+++ b/apps/web-ele/src/views/mall/product/spu/data.ts
@@ -24,7 +24,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
           const res = await getCategoryList({});
           return handleTree(res, 'id', 'parentId', 'children');
         },
-        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
       },
     },
     {
diff --git a/apps/web-ele/src/views/mall/product/spu/index.vue b/apps/web-ele/src/views/mall/product/spu/index.vue
index ae850da7..e2ef9e8f 100644
--- a/apps/web-ele/src/views/mall/product/spu/index.vue
+++ b/apps/web-ele/src/views/mall/product/spu/index.vue
@@ -13,7 +13,7 @@ import {
   treeToString,
 } from '@vben/utils';
 
-import { ElDescriptions, ElLoading, ElMessage, ElTabs } from 'element-plus';
+import { ElDescriptions, ElMessage, ElMessageBox, ElTabs } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCategoryList } from '#/api/mall/product/category';
@@ -97,35 +97,31 @@ function handleEdit(row: MallSpuApi.Spu) {
 
 /** 删除商品 */
 async function handleDelete(row: MallSpuApi.Spu) {
-  const hideLoading = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定删除该商品吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteSpu(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    hideLoading.close();
-  }
+  await deleteSpu(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 添加到仓库 / 回收站的状态 */
 async function handleStatus02Change(row: MallSpuApi.Spu, newStatus: number) {
-  // 二次确认
   const text =
     newStatus === ProductSpuStatusEnum.RECYCLE.status
       ? '加入到回收站'
       : '恢复到仓库';
-  confirm(`确认要"${row.name}"${text}吗？`)
-    .then(async () => {
-      await updateStatus({ id: row.id as number, status: newStatus });
-      ElMessage.success(`${text}成功`);
-      onRefresh();
-    })
-    .catch(() => {
-      ElMessage.error(`${text}失败`);
-    });
+  // 二次确认
+  await ElMessageBox.confirm(`确认要jian"${row.name}"${text}吗？`, {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  await updateStatus({ id: row.id as number, status: newStatus });
+  ElMessage.success(`${text}成功`);
+  onRefresh();
 }
 
 /** 更新状态 */
diff --git a/apps/web-ele/src/views/mall/product/spu/modules/detail.vue b/apps/web-ele/src/views/mall/product/spu/modules/detail.vue
index 147f1566..3a0818bb 100644
--- a/apps/web-ele/src/views/mall/product/spu/modules/detail.vue
+++ b/apps/web-ele/src/views/mall/product/spu/modules/detail.vue
@@ -1,29 +1,31 @@
 <script lang="ts" setup>
-import { useRouter, useRoute } from 'vue-router';
-import { ref, onMounted } from 'vue';
-import { floatToFixed2 } from '@vben/utils';
-import * as ProductSpuApi from '#/api/mall/product/spu';
 import type { MallSpuApi } from '#/api/mall/product/spu';
-import * as ProductCategoryApi from '#/api/mall/product/category';
-import * as ProductBrandApi from '#/api/mall/product/brand';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
 import { Page } from '@vben/common-ui';
-import { getIntDictOptions, DICT_TYPE } from '#/utils/dict';
+import { IconifyIcon } from '@vben/icons';
+import { floatToFixed2 } from '@vben/utils';
+
 import {
+  ElButton,
   ElCard,
-  ElDescriptions,
-  ElDescriptionsItem,
   ElCarousel,
   ElCarouselItem,
-  ElImage,
-  ElDivider,
-  ElButton,
-  ElTabs,
-  ElTabPane,
-  ElTag,
-  ElBadge,
+  ElDescriptions,
+  ElDescriptionsItem,
   ElEmpty,
+  ElImage,
+  ElTabPane,
+  ElTabs,
+  ElTag,
 } from 'element-plus';
-import { IconifyIcon } from '@vben/icons';
+
+import * as ProductBrandApi from '#/api/mall/product/brand';
+import * as ProductCategoryApi from '#/api/mall/product/category';
+import * as ProductSpuApi from '#/api/mall/product/spu';
+import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
 
 interface Category {
   id: number;
@@ -214,18 +216,18 @@ onMounted(async () => {
             <ElTag v-if="formData.specType" type="success">多规格</ElTag>
             <ElTag v-else type="info">单规格</ElTag>
             <ElTag v-if="formData.subCommissionType" type="warning">分销</ElTag>
-            <ElTag type="danger"
-              >库存:
+            <ElTag type="danger">
+              库存:
               {{
                 formData.skus?.reduce(
                   (sum, sku) => sum + (sku.stock || 0),
                   0,
                 ) || 0
-              }}</ElTag
-            >
-            <ElTag type="info"
-              >分类: {{ getCategoryNameById(formData.categoryId) }}</ElTag
-            >
+              }}
+            </ElTag>
+            <ElTag type="info">
+              分类: {{ getCategoryNameById(formData.categoryId) }}
+            </ElTag>
           </div>
         </div>
       </div>
@@ -236,32 +238,31 @@ onMounted(async () => {
             <!-- 基本信息 -->
             <ElCard shadow="never" header="商品信息" class="h-full">
               <ElDescriptions :column="1" border>
-                <ElDescriptionsItem label="商品名称">{{
-                  formData.name
-                }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="商品名称">
+                  {{ formData.name }}
+                </ElDescriptionsItem>
                 <ElDescriptionsItem label="商品分类">
-                  <ElTag type="success">{{
-                    getCategoryNameById(formData.categoryId)
-                  }}</ElTag>
+                  <ElTag type="success">
+                    {{ getCategoryNameById(formData.categoryId) }}
+                  </ElTag>
                 </ElDescriptionsItem>
                 <ElDescriptionsItem label="商品品牌">
-                  <ElTag type="primary">{{
-                    getBrandNameById(formData.brandId)
-                  }}</ElTag>
+                  <ElTag type="primary">
+                    {{ getBrandNameById(formData.brandId) }}
+                  </ElTag>
                 </ElDescriptionsItem>
                 <ElDescriptionsItem label="关键字">
-                  <ElTag type="danger"></ElTag
-                  >{{ formData.keyword || '无' }}</ElDescriptionsItem
-                >
-                <ElDescriptionsItem label="赠送积分">{{
-                  formData.giveIntegral
-                }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="虚拟销量">{{
-                  formData.virtualSalesCount
-                }}</ElDescriptionsItem>
-                <ElDescriptionsItem label="排序">{{
-                  formData.sort
-                }}</ElDescriptionsItem>
+                  <ElTag type="danger" />{{ formData.keyword || '无' }}
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="赠送积分">
+                  {{ formData.giveIntegral }}
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="虚拟销量">
+                  {{ formData.virtualSalesCount }}
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="排序">
+                  {{ formData.sort }}
+                </ElDescriptionsItem>
                 <ElDescriptionsItem label="规格类型">
                   <ElTag :type="formData.specType ? 'success' : 'info'">
                     {{ formData.specType ? '多规格' : '单规格' }}
@@ -309,9 +310,9 @@ onMounted(async () => {
                     </span>
                   </div>
                 </ElDescriptionsItem>
-                <ElDescriptionsItem label="运费模板">{{
-                  formData.deliveryTemplateId || '未设置'
-                }}</ElDescriptionsItem>
+                <ElDescriptionsItem label="运费模板">
+                  {{ formData.deliveryTemplateId || '未设置' }}
+                </ElDescriptionsItem>
               </ElDescriptions>
             </ElCard>
           </div>
@@ -370,7 +371,7 @@ onMounted(async () => {
             >
               <ElCard
                 shadow="hover"
-                :header="`规格 ${index + 1}${sku.properties && sku.properties.length > 0 ? ' - ' + sku.properties.map((p) => p.valueName).join('/') : ''}`"
+                :header="`规格 ${index + 1}${sku.properties && sku.properties.length > 0 ? ` - ${sku.properties.map((p) => p.valueName).join('/')}` : ''}`"
               >
                 <div class="flex flex-col gap-4 md:flex-row">
                   <ElImage
@@ -484,14 +485,17 @@ onMounted(async () => {
   background-color: #fff;
   border-radius: 4px;
 }
+
 .product-description :deep(img) {
   max-width: 100%;
   height: auto;
 }
+
 .product-description :deep(table) {
   width: 100%;
   border-collapse: collapse;
 }
+
 .product-description :deep(table td) {
   padding: 8px;
   border: 1px solid #eee;
diff --git a/apps/web-ele/src/views/mall/promotion/article/index.vue b/apps/web-ele/src/views/mall/promotion/article/index.vue
index b3f4ca8a..ff3f370e 100644
--- a/apps/web-ele/src/views/mall/promotion/article/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/article/index.vue
@@ -4,7 +4,7 @@ import type { MallArticleApi } from '#/api/mall/promotion/article';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteArticle, getArticlePage } from '#/api/mall/promotion/article';
@@ -35,17 +35,14 @@ function handleEdit(row: MallArticleApi.Article) {
 
 /** 删除品牌 */
 async function handleDelete(row: MallArticleApi.Article) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.title]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定删除该文章吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteArticle(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteArticle(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/mall/promotion/banner/index.vue b/apps/web-ele/src/views/mall/promotion/banner/index.vue
index cc6025d7..669fa9f5 100644
--- a/apps/web-ele/src/views/mall/promotion/banner/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/banner/index.vue
@@ -4,7 +4,7 @@ import type { MallBannerApi } from '#/api/mall/market/banner';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteBanner, getBannerPage } from '#/api/mall/market/banner';
@@ -35,17 +35,14 @@ function handleEdit(row: MallBannerApi.Banner) {
 
 /** 删除Banner */
 async function handleDelete(row: MallBannerApi.Banner) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.title]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定删除该Banner吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteBanner(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteBanner(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/activity/index.vue b/apps/web-ele/src/views/mall/promotion/bargain/activity/index.vue
index 1b48ab23..27043d5b 100644
--- a/apps/web-ele/src/views/mall/promotion/bargain/activity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/bargain/activity/index.vue
@@ -2,9 +2,9 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallBargainActivityApi } from '#/api/mall/promotion/bargain/bargainActivity';
 
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -41,40 +41,26 @@ function handleEdit(row: MallBargainActivityApi.BargainActivity) {
 
 /** 关闭砍价活动 */
 async function handleClose(row: MallBargainActivityApi.BargainActivity) {
-  try {
-    await confirm({
-      content: '确认关闭该砍价活动吗？',
-    });
-  } catch {
-    return;
-  }
-
-  const loadingInstance = ElLoading.service({
-    text: '确认关闭该砍价活动吗？',
-    fullscreen: true,
+  await ElMessageBox.confirm('确定关闭该砍价活动吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await closeBargainActivity(row.id as number);
-    ElMessage.success('关闭成功');
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await closeBargainActivity(row.id as number);
+  ElMessage.success('关闭成功');
+  onRefresh();
 }
 
 /** 删除砍价活动 */
 async function handleDelete(row: MallBargainActivityApi.BargainActivity) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定删除该砍价活动吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteBargainActivity(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteBargainActivity(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/mall/promotion/combination/activity/index.vue b/apps/web-ele/src/views/mall/promotion/combination/activity/index.vue
index 6eecd111..199f4ce2 100644
--- a/apps/web-ele/src/views/mall/promotion/combination/activity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/combination/activity/index.vue
@@ -2,9 +2,9 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
 
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -43,42 +43,30 @@ function handleEdit(row: MallCombinationActivityApi.CombinationActivity) {
 async function handleClose(
   row: MallCombinationActivityApi.CombinationActivity,
 ) {
-  try {
-    await confirm({
-      content: '确认关闭该拼团活动吗？',
-    });
-  } catch {
-    return;
-  }
-
-  const loadingInstance = ElLoading.service({
-    text: '关闭中...',
-    fullscreen: true,
+  await ElMessageBox.confirm('确定关闭该拼团活动吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await closeCombinationActivity(row.id as number);
-    ElMessage.success('关闭成功');
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+
+  await closeCombinationActivity(row.id as number);
+  ElMessage.success('关闭成功');
+  onRefresh();
 }
 
 /** 删除拼团活动 */
 async function handleDelete(
   row: MallCombinationActivityApi.CombinationActivity,
 ) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定删除该拼团活动吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteCombinationActivity(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+
+  await deleteCombinationActivity(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/index.vue b/apps/web-ele/src/views/mall/promotion/coupon/index.vue
index 6d0ebae0..d1f7144d 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/index.vue
@@ -5,9 +5,8 @@ import type { MallCouponApi } from '#/api/mall/promotion/coupon/coupon';
 import { ref } from 'vue';
 
 import { DocAlert, Page } from '@vben/common-ui';
-import { $t } from '@vben/locales';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -24,17 +23,14 @@ const statusTabs = ref(getStatusTabs());
 
 /** 删除优惠券 */
 async function handleDelete(row: MallCouponApi.Coupon) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定回收该优惠券吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteCoupon(row.id as number);
-    ElMessage.success('回收成功');
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteCoupon(row.id as number);
+  ElMessage.success('回收成功');
+  onRefresh();
 }
 
 /** 刷新表格 */
diff --git a/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue b/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue
index 337b8db9..9e79871a 100644
--- a/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue
@@ -2,9 +2,9 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallDiscountActivityApi } from '#/api/mall/promotion/discount/discountActivity';
 
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -41,40 +41,28 @@ function handleEdit(row: MallDiscountActivityApi.DiscountActivity) {
 
 /** 关闭满减活动 */
 async function handleClose(row: MallDiscountActivityApi.DiscountActivity) {
-  try {
-    await confirm({
-      content: '确认关闭该限时折扣活动吗？',
-    });
-  } catch {
-    return;
-  }
-
-  const loadingInstance = ElLoading.service({
-    text: '正在关闭中',
-    fullscreen: true,
+  await ElMessageBox.confirm('确定关闭该限时折扣活动吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await closeDiscountActivity(row.id as number);
-    ElMessage.success('关闭成功');
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+
+  await closeDiscountActivity(row.id as number);
+  ElMessage.success('关闭成功');
+  onRefresh();
 }
 
 /** 删除满减活动 */
 async function handleDelete(row: MallDiscountActivityApi.DiscountActivity) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定删除该限时折扣活动吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteDiscountActivity(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+
+  await deleteDiscountActivity(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/mall/promotion/diy/page/index.vue b/apps/web-ele/src/views/mall/promotion/diy/page/index.vue
index 64087e19..76e0facf 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/page/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/diy/page/index.vue
@@ -6,6 +6,8 @@ import { useRouter } from 'vue-router';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
+import { ElMessage, ElMessageBox } from 'element-plus';
+
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteDiyPage, getDiyPagePage } from '#/api/mall/promotion/diy/page';
 import { $t } from '#/locales';
@@ -45,7 +47,13 @@ function handleDecorate(row: MallDiyPageApi.DiyPage) {
 
 /** 删除DIY页面 */
 async function handleDelete(row: MallDiyPageApi.DiyPage) {
+  await ElMessageBox.confirm('确定删除该装修页面吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
   await deleteDiyPage(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
   onRefresh();
 }
 
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/index.vue b/apps/web-ele/src/views/mall/promotion/diy/template/index.vue
index 3db14a9e..c35eb627 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/template/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/index.vue
@@ -4,9 +4,9 @@ import type { MallDiyTemplateApi } from '#/api/mall/promotion/diy/template';
 
 import { useRouter } from 'vue-router';
 
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -51,19 +51,26 @@ function handleDecorate(row: MallDiyTemplateApi.DiyTemplate) {
 
 /** 使用模板 */
 async function handleUse(row: MallDiyTemplateApi.DiyTemplate) {
-  confirm({
-    content: `是否使用模板"${row.name}"?`,
-  }).then(async () => {
-    // 发起删除
-    await useDiyTemplate(row.id as number);
-    ElMessage.success('使用成功');
-    onRefresh();
+  await ElMessageBox.confirm(`是否使用模板"${row.name}"?`, {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
+  // 发起删除
+  await useDiyTemplate(row.id as number);
+  ElMessage.success('使用成功');
+  onRefresh();
 }
 
 /** 删除DIY模板 */
 async function handleDelete(row: MallDiyTemplateApi.DiyTemplate) {
+  await ElMessageBox.confirm('确定删除该装修模板吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
   await deleteDiyTemplate(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
   onRefresh();
 }
 
diff --git a/apps/web-ele/src/views/mall/promotion/point/activity/index.vue b/apps/web-ele/src/views/mall/promotion/point/activity/index.vue
index a5b9700d..4e4c7069 100644
--- a/apps/web-ele/src/views/mall/promotion/point/activity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/point/activity/index.vue
@@ -4,9 +4,9 @@ import type { MallPointActivityApi } from '#/api/mall/promotion/point';
 
 import { computed } from 'vue';
 
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -48,18 +48,24 @@ function handleEdit(row: MallPointActivityApi.PointActivity) {
 }
 
 /** 关闭积分活动 */
-function handleClose(row: MallPointActivityApi.PointActivity) {
-  confirm({
-    content: '确认关闭该积分商城活动吗？',
-  }).then(async () => {
-    await closePointActivity(row.id);
-    ElMessage.success('关闭成功');
-    onRefresh();
+async function handleClose(row: MallPointActivityApi.PointActivity) {
+  await ElMessageBox.confirm('确认关闭该积分商城活动吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
+  await closePointActivity(row.id);
+  ElMessage.success('关闭成功');
+  onRefresh();
 }
 
 /** 删除积分活动 */
 async function handleDelete(row: MallPointActivityApi.PointActivity) {
+  await ElMessageBox.confirm('确定删除该积分商城活动吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
   await deletePointActivity(row.id);
   onRefresh();
 }
diff --git a/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue b/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
index 7a2d81c2..9b904e3d 100644
--- a/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
@@ -2,9 +2,9 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -41,40 +41,27 @@ function handleEdit(row: MallRewardActivityApi.RewardActivity) {
 
 /** 关闭活动 */
 async function handleClose(row: MallRewardActivityApi.RewardActivity) {
-  try {
-    await confirm({
-      content: '确认关闭该满减送活动吗？',
-    });
-  } catch {
-    return;
-  }
-
-  const loadingInstance = ElLoading.service({
-    text: '正在关闭中',
-    fullscreen: true,
+  await ElMessageBox.confirm('确认关闭该满减送活动吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await closeRewardActivity(row.id as number);
-    ElMessage.success('关闭成功');
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+
+  await closeRewardActivity(row.id as number);
+  ElMessage.success('关闭成功');
+  onRefresh();
 }
 
 /** 删除活动 */
 async function handleDelete(row: MallRewardActivityApi.RewardActivity) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定删除该满减送活动吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteRewardActivity(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteRewardActivity(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue b/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue
index d3de10b8..941adec9 100644
--- a/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue
@@ -7,7 +7,7 @@ import { onMounted } from 'vue';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { ElLoading, ElMessage, ElTag } from 'element-plus';
+import { ElMessage, ElMessageBox, ElTag } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -45,32 +45,26 @@ function handleCreate() {
 
 /** 关闭活动 */
 async function handleClose(row: MallSeckillActivityApi.SeckillActivity) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.closing', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确认关闭该秒杀活动吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await closeSeckillActivity(row.id as number);
-    ElMessage.success('关闭成功');
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await closeSeckillActivity(row.id as number);
+  ElMessage.success('关闭成功');
+  onRefresh();
 }
 
 /** 删除活动 */
 async function handleDelete(row: MallSeckillActivityApi.SeckillActivity) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定删除该秒杀活动吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteSeckillActivity(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteSeckillActivity(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue b/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue
index 934c1802..eb13c442 100644
--- a/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue
@@ -4,7 +4,7 @@ import type { MallSeckillConfigApi } from '#/api/mall/promotion/seckill/seckillC
 
 import { confirm, Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -39,17 +39,14 @@ function handleEdit(row: MallSeckillConfigApi.SeckillConfig) {
 
 /** 删除秒杀时段 */
 async function handleDelete(row: MallSeckillConfigApi.SeckillConfig) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定删除该秒杀时段吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteSeckillConfig(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteSeckillConfig(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 修改状态 */
diff --git a/apps/web-ele/src/views/mall/statistics/member/components/member-region-card.vue b/apps/web-ele/src/views/mall/statistics/member/components/member-region-card.vue
new file mode 100644
index 00000000..4a29d1e5
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/member/components/member-region-card.vue
@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { fenToYuan } from '@vben/utils';
+
+import { ElRow } from 'element-plus';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+const areaStatisticsList = ref<MallMemberStatisticsApi.AreaStatistics[]>([]); // 省份会员统计
+const areaChartOptions = reactive({
+  tooltip: {
+    trigger: 'item' as const,
+    formatter: (params: any) => {
+      return `${params?.data?.areaName || params?.name}<br/>
+会员数量：${params?.data?.userCount || 0}<br/>
+订单创建数量：${params?.data?.orderCreateUserCount || 0}<br/>
+订单支付数量：${params?.data?.orderPayUserCount || 0}<br/>
+订单支付金额：${fenToYuan(params?.data?.orderPayPrice || 0)}`;
+    },
+  },
+  visualMap: {
+    text: ['高', '低'],
+    realtime: false,
+    calculable: true,
+    top: 'middle',
+    inRange: {
+      color: ['#fff', '#3b82f6'],
+    },
+    min: 0,
+    max: 0,
+  },
+  series: [
+    {
+      name: '会员地域分布',
+      type: 'map' as const,
+      map: 'china',
+      roam: false,
+      selectedMode: false,
+      data: [] as any[],
+    },
+  ],
+});
+
+/** 按照省份，查询会员统计列表 */
+const getMemberAreaStatisticsList = async () => {
+  areaStatisticsList.value =
+    await MemberStatisticsApi.getMemberAreaStatisticsList();
+  let min = 0;
+  let max = 0;
+
+  const mapData = areaStatisticsList.value.map((item) => {
+    const payUserCount = item?.orderPayUserCount || 0;
+    min = Math.min(min, payUserCount);
+    max = Math.max(max, payUserCount);
+    return { ...item, name: item.areaName, value: payUserCount };
+  });
+
+  // 使用类型断言处理赋值
+  (areaChartOptions.series[0] as any).data = mapData;
+  areaChartOptions.visualMap.min = min;
+  areaChartOptions.visualMap.max = max;
+};
+
+// 格式化为元
+const fenToYuanFormat = (row: any, column: any, cellValue: any) => {
+  return fenToYuan(cellValue);
+};
+
+onMounted(async () => {
+  await getMemberAreaStatisticsList();
+  renderEcharts(areaChartOptions);
+});
+</script>
+
+<template>
+  <AnalysisChartCard title="会员地域分布">
+    <ElRow>
+      <ElCol :span="12">
+        <EchartsUI ref="chartRef" />
+      </ElCol>
+      <ElCol :span="12">
+        <el-table :data="areaStatisticsList" :height="300">
+          <el-table-column
+            :sort-method="
+              (obj1: any, obj2: any) =>
+                obj1.areaName.localeCompare(obj2.areaName, 'zh-CN')
+            "
+            align="center"
+            label="省份"
+            min-width="80"
+            prop="areaName"
+            show-overflow-tooltip
+            sortable
+          />
+          <el-table-column
+            align="center"
+            label="会员数量"
+            min-width="105"
+            prop="userCount"
+            sortable
+          />
+          <el-table-column
+            align="center"
+            label="订单创建数量"
+            min-width="135"
+            prop="orderCreateUserCount"
+            sortable
+          />
+          <el-table-column
+            align="center"
+            label="订单支付数量"
+            min-width="135"
+            prop="orderPayUserCount"
+            sortable
+          />
+          <el-table-column
+            :formatter="fenToYuanFormat"
+            align="center"
+            label="订单支付金额"
+            min-width="135"
+            prop="orderPayPrice"
+            sortable
+          />
+        </el-table>
+      </ElCol>
+    </ElRow>
+  </AnalysisChartCard>
+</template>
diff --git a/apps/web-ele/src/views/mall/statistics/member/components/member-sex-card.vue b/apps/web-ele/src/views/mall/statistics/member/components/member-sex-card.vue
new file mode 100644
index 00000000..84b8c7e6
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/member/components/member-sex-card.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+import type { DictDataType } from '#/utils/dict';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+const sexChartOptions = reactive({
+  tooltip: {
+    trigger: 'item' as const,
+    confine: true,
+    formatter: '{a} <br/>{b} : {c} ({d}%)',
+  },
+  legend: {
+    orient: 'vertical' as const,
+    left: 'right',
+  },
+  roseType: 'area',
+  series: [
+    {
+      name: '会员性别',
+      type: 'pie' as const,
+      label: {
+        show: false,
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [] as any[],
+    },
+  ],
+});
+
+/** 按照性别，查询会员统计列表 */
+const getMemberSexStatisticsList = async () => {
+  const list = await MemberStatisticsApi.getMemberSexStatisticsList();
+  const dictDataList = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX);
+  dictDataList.push({ label: '未知', value: null } as any);
+  (sexChartOptions.series[0] as any).data = dictDataList.map(
+    (dictData: DictDataType) => {
+      const userCount = list.find(
+        (item: MallMemberStatisticsApi.SexStatistics) =>
+          item.sex === dictData.value,
+      )?.userCount;
+      return {
+        name: dictData.label,
+        value: userCount || 0,
+      };
+    },
+  );
+};
+
+onMounted(async () => {
+  await getMemberSexStatisticsList();
+  renderEcharts(sexChartOptions);
+});
+</script>
+
+<template>
+  <AnalysisChartCard title="会员性别分布">
+    <EchartsUI ref="chartRef" />
+  </AnalysisChartCard>
+</template>
diff --git a/apps/web-ele/src/views/mall/statistics/member/index.vue b/apps/web-ele/src/views/mall/statistics/member/index.vue
index 203b6d91..c98ec1b2 100644
--- a/apps/web-ele/src/views/mall/statistics/member/index.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/index.vue
@@ -1,7 +1,64 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member'; // 会员统计数据
+import type { AnalysisOverviewIconItem } from '#/views/mall/home/components/data';
 
-import { ElButton } from 'element-plus';
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+import { fenToYuan } from '@vben/utils';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member'; // 会员统计数据
+import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
+import MemberFunnelCard from '#/views/mall/home/components/member-funnel-card.vue';
+import MemberTerminalCard from '#/views/mall/home/components/member-terminal-card.vue';
+
+import MemberRegionCard from './components/member-region-card.vue';
+import MemberSexCard from './components/member-sex-card.vue';
+
+const summary = ref<MallMemberStatisticsApi.Summary>();
+
+const overviewItems = ref<AnalysisOverviewIconItem[]>([]);
+const loadOverview = async () => {
+  summary.value = await MemberStatisticsApi.getMemberSummary();
+  overviewItems.value = [
+    {
+      icon: 'fa-solid:users', // 自定义立体用户群组图标 - 累计会员数
+      title: '累计会员数',
+      value: summary.value?.userCount || 0,
+      iconBgColor: 'text-blue-500',
+      iconColor: 'bg-blue-100',
+    },
+    {
+      icon: 'fa-solid:user', // 自定义立体信用卡图标 - 累计充值人数
+      title: '累计充值人数',
+      value: summary.value?.rechargeUserCount || 0,
+      iconBgColor: 'text-purple-500',
+      iconColor: 'bg-purple-100',
+    },
+    {
+      icon: 'fa-solid:money-check-alt', // 自定义立体钞票图标 - 累计充值金额
+      title: '累计充值金额',
+      value: Number(fenToYuan(summary.value?.rechargePrice || 0)),
+      iconBgColor: 'text-yellow-500',
+      iconColor: 'bg-yellow-100',
+      prefix: '￥',
+      decimals: 2,
+    },
+    {
+      icon: 'fa-solid:yen-sign', // 自定义立体用户添加图标 - 今日会员注册量
+      title: '累计消费金额',
+      value: Number(fenToYuan(summary.value?.expensePrice || 0)),
+      iconBgColor: 'text-green-500',
+      iconColor: 'bg-green-100',
+      prefix: '￥',
+      decimals: 2,
+    },
+  ];
+};
+
+onMounted(async () => {
+  loadOverview();
+});
 </script>
 
 <template>
@@ -10,25 +67,19 @@ import { ElButton } from 'element-plus';
       title="【统计】会员、商品、交易统计"
       url="https://doc.iocoder.cn/mall/statistics/"
     />
-    <ElButton
-      danger
-      type="primary"
-      link
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </ElButton>
-    <br />
-    <ElButton
-      type="primary"
-      link
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/member/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/member/index
-      代码，pull request 贡献给我们！
-    </ElButton>
+    <div class="mt-5 w-full md:flex">
+      <AnalysisOverviewIcon
+        v-model:model-value="overviewItems"
+        class="mt-5 md:mr-4 md:mt-0 md:w-full"
+      />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <MemberFunnelCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
+      <MemberTerminalCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <MemberRegionCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
+      <MemberSexCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
+    </div>
   </Page>
 </template>
diff --git a/apps/web-ele/src/views/mall/statistics/product/components/product-rank.vue b/apps/web-ele/src/views/mall/statistics/product/components/product-rank.vue
new file mode 100644
index 00000000..09ba064c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/product/components/product-rank.vue
@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import type { MallProductStatisticsApi } from '#/api/mall/statistics/product';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { buildSortingField, floatToFixed2 } from '@vben/utils';
+
+import * as ProductStatisticsApi from '#/api/mall/statistics/product';
+import ShortcutDateRangePicker from '#/views/mall/home/components/shortcut-date-range-picker.vue';
+
+/** 商品排行 */
+defineOptions({ name: 'ProductRank' });
+
+// 格式化：访客-支付转化率
+const formatConvertRate = (row: MallProductStatisticsApi.ProductStatistics) => {
+  return `${row.browseConvertPercent}%`;
+};
+
+const handleSortChange = (params: any) => {
+  queryParams.sortingFields = [buildSortingField(params)];
+  getSpuList();
+};
+
+const handleDateRangeChange = (times: any[]) => {
+  queryParams.times = times as [];
+  getSpuList();
+};
+
+const shortcutDateRangePicker = ref();
+// 查询参数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  times: [],
+  sortingFields: {},
+});
+const loading = ref(false); // 列表的加载中
+const total = ref(0); // 列表的总页数
+const list = ref<MallProductStatisticsApi.ProductStatistics[]>([]); // 列表的数据
+
+/** 查询商品列表 */
+const getSpuList = async () => {
+  loading.value = true;
+  try {
+    const data =
+      await ProductStatisticsApi.getProductStatisticsRankPage(queryParams);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 格式化金额【分转元】
+// @ts-ignore
+const fenToYuanFormat = (_, __, cellValue: any, ___) => {
+  return `￥${floatToFixed2(cellValue)}`;
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await getSpuList();
+});
+</script>
+<template>
+  <AnalysisChartCard title="商品排行">
+    <template #header-suffix>
+      <ShortcutDateRangePicker
+        ref="shortcutDateRangePicker"
+        @change="handleDateRangeChange"
+      />
+    </template>
+    <!-- 排行列表 -->
+    <el-table v-loading="loading" :data="list" @sort-change="handleSortChange">
+      <el-table-column label="商品 ID" prop="spuId" min-width="70" />
+      <el-table-column label="商品图片" align="center" prop="picUrl" width="80">
+        <template #default="{ row }">
+          <el-image
+            :src="row.picUrl"
+            :preview-src-list="[row.picUrl]"
+            class="h-30px w-30px"
+            preview-teleported
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="商品名称"
+        prop="name"
+        min-width="200"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="浏览量"
+        prop="browseCount"
+        min-width="90"
+        sortable="custom"
+      />
+      <el-table-column
+        label="访客数"
+        prop="browseUserCount"
+        min-width="90"
+        sortable="custom"
+      />
+      <el-table-column
+        label="加购件数"
+        prop="cartCount"
+        min-width="105"
+        sortable="custom"
+      />
+      <el-table-column
+        label="下单件数"
+        prop="orderCount"
+        min-width="105"
+        sortable="custom"
+      />
+      <el-table-column
+        label="支付件数"
+        prop="orderPayCount"
+        min-width="105"
+        sortable="custom"
+      />
+      <el-table-column
+        label="支付金额"
+        prop="orderPayPrice"
+        min-width="105"
+        sortable="custom"
+        :formatter="fenToYuanFormat"
+      />
+      <el-table-column
+        label="收藏数"
+        prop="favoriteCount"
+        min-width="90"
+        sortable="custom"
+      />
+      <el-table-column
+        label="访客-支付转化率(%)"
+        prop="browseConvertPercent"
+        min-width="180"
+        sortable="custom"
+        :formatter="formatConvertRate"
+      />
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getSpuList"
+    />
+  </AnalysisChartCard>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mall/statistics/product/components/product-summary.vue b/apps/web-ele/src/views/mall/statistics/product/components/product-summary.vue
new file mode 100644
index 00000000..41e7a94a
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/product/components/product-summary.vue
@@ -0,0 +1,331 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { MallDataComparisonResp } from '#/api/mall/statistics/common';
+import type { MallProductStatisticsApi } from '#/api/mall/statistics/product';
+import type { AnalysisOverviewIconItem } from '#/views/mall/home/components/data';
+
+import { reactive, ref } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import {
+  calculateRelativeRate,
+  downloadFileFromBlobPart,
+  fenToYuan,
+  formatDate,
+  isSameDay,
+} from '@vben/utils';
+
+import dayjs from 'dayjs';
+
+import * as ProductStatisticsApi from '#/api/mall/statistics/product';
+import AnalysisChartCard from '#/views/mall/home/components/analysis-chart-card.vue';
+import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
+import ShortcutDateRangePicker from '#/views/mall/home/components/shortcut-date-range-picker.vue';
+
+/** 商品概况 */
+defineOptions({ name: 'ProductSummary' });
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+const trendLoading = ref(true); // 商品状态加载中
+const exportLoading = ref(false); // 导出的加载中
+const trendSummary =
+  ref<MallDataComparisonResp<MallProductStatisticsApi.ProductStatistics>>(); // 商品状况统计数据
+const shortcutDateRangePicker = ref();
+
+/** 折线图配置 */
+const lineChartOptions = reactive({
+  dataset: {
+    dimensions: [
+      'time',
+      'browseCount',
+      'browseUserCount',
+      'orderPayPrice',
+      'afterSaleRefundPrice',
+    ],
+    source: [] as MallProductStatisticsApi.ProductStatistics[],
+  },
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true,
+  },
+  legend: {
+    top: 50,
+  },
+  series: [
+    {
+      name: '商品浏览量',
+      type: 'line',
+      smooth: true,
+      itemStyle: { color: '#B37FEB' },
+    },
+    {
+      name: '商品访客数',
+      type: 'line',
+      smooth: true,
+      itemStyle: { color: '#FFAB2B' },
+    },
+    {
+      name: '支付金额',
+      type: 'bar',
+      smooth: true,
+      yAxisIndex: 1,
+      itemStyle: { color: '#1890FF' },
+    },
+    {
+      name: '退款金额',
+      type: 'bar',
+      smooth: true,
+      yAxisIndex: 1,
+      itemStyle: { color: '#00C050' },
+    },
+  ],
+  toolbox: {
+    feature: {
+      // 数据区域缩放
+      dataZoom: {
+        yAxisIndex: false, // Y轴不缩放
+      },
+      brush: {
+        type: ['lineX', 'clear'] as const, // 区域缩放按钮、还原按钮
+      },
+      saveAsImage: { show: true, name: '商品状况' }, // 保存为图片
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+    },
+    padding: [5, 10],
+  },
+  xAxis: {
+    type: 'category' as const,
+    boundaryGap: true,
+    axisTick: {
+      show: false,
+    },
+  },
+  yAxis: [
+    {
+      type: 'value' as const,
+      name: '金额',
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: '#7F8B9C',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#F5F7F9',
+        },
+      },
+    },
+    {
+      type: 'value' as const,
+      name: '数量',
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: '#7F8B9C',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#F5F7F9',
+        },
+      },
+    },
+  ],
+});
+
+/** 处理商品状况查询 */
+const getProductTrendData = async () => {
+  trendLoading.value = true;
+  // 1. 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
+  const times = shortcutDateRangePicker.value.times;
+  if (isSameDay(times[0], times[1])) {
+    // 前天
+    times[0] = formatDate(dayjs(times[0]).subtract(1, 'd').toDate());
+  }
+  // 查询数据
+  await Promise.all([getProductTrendSummary(), getProductStatisticsList()]);
+  renderEcharts(lineChartOptions as unknown as echarts.EChartsOption);
+  loadOverview();
+  trendLoading.value = false;
+};
+
+/** 查询商品状况数据统计 */
+const getProductTrendSummary = async () => {
+  const times = shortcutDateRangePicker.value.times;
+  trendSummary.value = await ProductStatisticsApi.getProductStatisticsAnalyse({
+    times,
+  });
+};
+
+/** 查询商品状况数据列表 */
+const getProductStatisticsList = async () => {
+  // 查询数据
+  const times = shortcutDateRangePicker.value.times;
+  const list: MallProductStatisticsApi.ProductStatistics[] =
+    await ProductStatisticsApi.getProductStatisticsList({ times });
+  // 处理数据
+  for (const item of list) {
+    item.orderPayPrice = Number(fenToYuan(item.orderPayPrice));
+    item.afterSaleRefundPrice = Number(fenToYuan(item.afterSaleRefundPrice));
+  }
+  // 更新 Echarts 数据
+  if (lineChartOptions.dataset && lineChartOptions.dataset.source) {
+    lineChartOptions.dataset.source = list;
+  }
+};
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await confirm('确定要导出商品状况吗？');
+    // 发起导出
+    exportLoading.value = true;
+    const times = shortcutDateRangePicker.value.times;
+    const data = await ProductStatisticsApi.exportProductStatisticsExcel({
+      times,
+    });
+    downloadFileFromBlobPart({ fileName: '商品状况.xls', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+};
+
+const overviewItems = ref<AnalysisOverviewIconItem[]>();
+const loadOverview = () => {
+  overviewItems.value = [
+    {
+      icon: 'ep:view',
+      title: '商品浏览量',
+      value: trendSummary.value?.value?.browseCount || 0,
+      iconColor: 'bg-blue-100',
+      iconBgColor: 'text-blue-500',
+      tooltip:
+        '在选定条件下，所有商品详情页被访问的次数，一个人在统计时间内访问多次记为多次',
+      percent: calculateRelativeRate(
+        trendSummary?.value?.value?.browseCount,
+        trendSummary.value?.reference?.browseCount,
+      ),
+    },
+    {
+      icon: 'ep:user-filled',
+      title: '商品访客数',
+      value: trendSummary.value?.value?.browseUserCount || 0,
+      iconColor: 'bg-purple-100',
+      iconBgColor: 'text-purple-500',
+      tooltip:
+        '在选定条件下，访问任何商品详情页的人数，一个人在统计时间范围内访问多次只记为一个',
+      percent: calculateRelativeRate(
+        trendSummary?.value?.value?.browseUserCount,
+        trendSummary.value?.reference?.browseUserCount,
+      ),
+    },
+    {
+      icon: 'fa-solid:money-check-alt',
+      title: '支付件数',
+      iconColor: 'bg-yellow-100',
+      iconBgColor: 'text-yellow-500',
+      value: trendSummary.value?.value?.orderPayCount || 0,
+      tooltip: '在选定条件下，成功付款订单的商品件数之和',
+      percent: calculateRelativeRate(
+        trendSummary?.value?.value?.orderPayCount,
+        trendSummary.value?.reference?.orderPayCount,
+      ),
+    },
+    {
+      icon: 'ep:warning-filled',
+      title: '支付金额',
+      iconColor: 'bg-green-100',
+      iconBgColor: 'text-green-500',
+      prefix: '￥',
+      value: Number(fenToYuan(trendSummary.value?.value?.orderPayPrice || 0)),
+      tooltip: '在选定条件下，成功付款订单的商品金额之和',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        trendSummary?.value?.value?.orderPayPrice,
+        trendSummary.value?.reference?.orderPayPrice,
+      ),
+    },
+    {
+      icon: 'fa-solid:wallet',
+      title: '退款件数',
+      iconColor: 'bg-cyan-100',
+      iconBgColor: 'text-cyan-500',
+      value: trendSummary.value?.value?.afterSaleCount || 0,
+      tooltip: '在选定条件下，成功退款的商品件数之和',
+      percent: calculateRelativeRate(
+        trendSummary?.value?.value?.afterSaleCount,
+        trendSummary.value?.reference?.afterSaleCount,
+      ),
+    },
+    {
+      icon: 'fa-solid:award',
+      title: '退款金额',
+      iconColor: 'bg-yellow-100',
+      iconBgColor: 'text-yellow-500',
+      prefix: '￥',
+      decimals: 2,
+      value: Number(
+        fenToYuan(trendSummary.value?.value?.afterSaleRefundPrice || 0),
+      ),
+      tooltip: '在选定条件下，成功退款的商品金额之和',
+      percent: calculateRelativeRate(
+        trendSummary?.value?.value?.afterSaleRefundPrice,
+        trendSummary.value?.reference?.afterSaleRefundPrice,
+      ),
+    },
+  ];
+};
+</script>
+<template>
+  <AnalysisChartCard title="商品概况">
+    <template #header-suffix>
+      <!-- 查询条件 -->
+      <ShortcutDateRangePicker
+        ref="shortcutDateRangePicker"
+        @change="getProductTrendData"
+      >
+        <el-button
+          class="ml-4"
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['statistics:product:export']"
+        >
+          <Icon icon="ep:download" class="mr-1" />导出
+        </el-button>
+      </ShortcutDateRangePicker>
+    </template>
+    <!-- 统计值 -->
+    <AnalysisOverviewIcon
+      v-model:model-value="overviewItems"
+      :columns-number="6"
+      class="mt-5 md:mr-4 md:mt-0 md:w-full"
+    />
+    <!-- 折线图 -->
+    <el-skeleton :loading="trendLoading" animated>
+      <EchartsUI ref="chartRef" height="500px" />
+    </el-skeleton>
+  </AnalysisChartCard>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mall/statistics/product/index.vue b/apps/web-ele/src/views/mall/statistics/product/index.vue
index cfc1f5ce..26d1b86c 100644
--- a/apps/web-ele/src/views/mall/statistics/product/index.vue
+++ b/apps/web-ele/src/views/mall/statistics/product/index.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { DocAlert, Page } from '@vben/common-ui';
 
-import { ElButton } from 'element-plus';
+import ProductRank from './components/product-rank.vue';
+import ProductSummary from './components/product-summary.vue';
 </script>
 
 <template>
@@ -10,25 +11,11 @@ import { ElButton } from 'element-plus';
       title="【统计】会员、商品、交易统计"
       url="https://doc.iocoder.cn/mall/statistics/"
     />
-    <ElButton
-      danger
-      type="primary"
-      link
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </ElButton>
-    <br />
-    <ElButton
-      type="primary"
-      link
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/product/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/product/index
-      代码，pull request 贡献给我们！
-    </ElButton>
+    <div class="mt-5 w-full">
+      <ProductSummary class="mt-5 md:mr-4 md:mt-0" />
+    </div>
+    <div class="mt-5 w-full">
+      <ProductRank class="mt-5 md:mr-4 md:mt-0" />
+    </div>
   </Page>
 </template>
diff --git a/apps/web-ele/src/views/mall/statistics/trade/components/trade-transaction-card.vue b/apps/web-ele/src/views/mall/statistics/trade/components/trade-transaction-card.vue
new file mode 100644
index 00000000..9087e0ef
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/trade/components/trade-transaction-card.vue
@@ -0,0 +1,280 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { MallDataComparisonResp } from '#/api/mall/statistics/common';
+import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
+import type { AnalysisOverviewIconItem } from '#/views/mall/home/components/data';
+
+import { reactive, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import {
+  calculateRelativeRate,
+  downloadFileFromBlobPart,
+  fenToYuan,
+  formatDate,
+  isSameDay,
+} from '@vben/utils';
+
+import dayjs from 'dayjs';
+import { ElMessageBox } from 'element-plus';
+
+import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import AnalysisChartCard from '#/views/mall/home/components/analysis-chart-card.vue';
+import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
+import ShortcutDateRangePicker from '#/views/mall/home/components/shortcut-date-range-picker.vue';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+const overviewItems = ref<AnalysisOverviewIconItem[]>();
+const summary =
+  ref<MallDataComparisonResp<MallTradeStatisticsApi.TradeTrendSummary>>();
+const shortcutDateRangePicker = ref();
+const exportLoading = ref(false); // 导出的加载中
+const trendLoading = ref(true); // 交易状态加载中
+const loadOverview = () => {
+  overviewItems.value = [
+    {
+      icon: 'fa-solid:yen-sign',
+      title: '营业额',
+      value: Number(fenToYuan(summary?.value?.value.turnoverPrice || 0)),
+      tooltip: '商品支付金额、充值金额',
+      iconColor: 'bg-blue-100',
+      iconBgColor: 'text-blue-500',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.turnoverPrice,
+        summary?.value?.reference?.turnoverPrice,
+      ),
+    },
+    {
+      icon: 'fa-solid:shopping-cart',
+      title: '商品支付金额',
+      value: Number(fenToYuan(summary.value?.value?.orderPayPrice || 0)),
+      tooltip:
+        '用户购买商品的实际支付金额，包括微信支付、余额支付、支付宝支付、线下支付金额（拼团商品在成团之后计入，线下支付订单在后台确认支付后计入）',
+      iconColor: 'bg-purple-100',
+      iconBgColor: 'text-purple-500',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.orderPayPrice,
+        summary?.value?.reference?.orderPayPrice,
+      ),
+    },
+    {
+      icon: 'fa-solid:money-check-alt',
+      title: '充值金额',
+      value: Number(fenToYuan(summary.value?.value?.rechargePrice || 0)),
+      tooltip: '用户成功充值的金额',
+      iconColor: 'bg-yellow-100',
+      iconBgColor: 'text-yellow-500',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.rechargePrice,
+        summary?.value?.reference?.rechargePrice,
+      ),
+    },
+    {
+      icon: 'ep:warning-filled',
+      title: '支出金额',
+      value: Number(fenToYuan(summary.value?.value?.expensePrice || 0)),
+      tooltip: '余额支付金额、支付佣金金额、商品退款金额',
+      iconColor: 'bg-green-100',
+      iconBgColor: 'text-green-500',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.expensePrice,
+        summary?.value?.reference?.expensePrice,
+      ),
+    },
+    {
+      icon: 'fa-solid:wallet',
+      title: '余额支付金额',
+      value: Number(fenToYuan(summary.value?.value?.walletPayPrice || 0)),
+      tooltip: '余额支付金额、支付佣金金额、商品退款金额',
+      iconColor: 'bg-cyan-100',
+      iconBgColor: 'text-cyan-500',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.walletPayPrice,
+        summary?.value?.reference?.walletPayPrice,
+      ),
+    },
+    {
+      icon: 'fa-solid:award',
+      title: '支付佣金金额',
+      value: Number(
+        fenToYuan(summary.value?.value?.brokerageSettlementPrice || 0),
+      ),
+      tooltip: '后台给推广员支付的推广佣金，以实际支付为准',
+      iconColor: 'bg-yellow-100',
+      iconBgColor: 'text-yellow-500',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.brokerageSettlementPrice,
+        summary?.value?.reference?.brokerageSettlementPrice,
+      ),
+    },
+    {
+      icon: 'fa-solid:times-circle',
+      title: '商品退款金额',
+      value: Number(fenToYuan(summary.value?.value?.afterSaleRefundPrice || 0)),
+      tooltip: '用户成功退款的商品金额',
+      iconColor: 'bg-blue-100',
+      iconBgColor: 'text-blue-500',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.afterSaleRefundPrice,
+        summary?.value?.reference?.afterSaleRefundPrice,
+      ),
+    },
+  ];
+};
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await ElMessageBox.confirm('确定要导出交易状况吗？');
+    // 发起导出
+    exportLoading.value = true;
+    const times = shortcutDateRangePicker.value.times;
+    const data = await TradeStatisticsApi.exportTradeStatisticsExcel({ times });
+    downloadFileFromBlobPart({ fileName: '交易状况.xls', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+};
+
+const getTradeTrendData = async () => {
+  trendLoading.value = true;
+  // 1. 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
+  const times = shortcutDateRangePicker.value.times;
+  if (isSameDay(times[0], times[1])) {
+    // 前天
+    times[0] = formatDate(dayjs(times[0]).subtract(1, 'd').toDate());
+  }
+  // 查询数据
+  await Promise.all([getTradeStatisticsAnalyse(), getTradeStatisticsList()]);
+  trendLoading.value = false;
+
+  loadOverview();
+  renderEcharts(lineChartOptions as any);
+};
+
+/** 查询交易状况数据统计 */
+const getTradeStatisticsAnalyse = async () => {
+  const times = shortcutDateRangePicker.value.times;
+  summary.value = await TradeStatisticsApi.getTradeStatisticsAnalyse({
+    times,
+  });
+};
+
+/** 查询交易状况数据列表 */
+const getTradeStatisticsList = async () => {
+  // 查询数据
+  const times = shortcutDateRangePicker.value.times;
+  const list = await TradeStatisticsApi.getTradeStatisticsList({ times });
+  // 处理数据
+  for (const item of list) {
+    item.turnoverPrice = Number(fenToYuan(item.turnoverPrice));
+    item.orderPayPrice = Number(fenToYuan(item.orderPayPrice));
+    item.rechargePrice = Number(fenToYuan(item.rechargePrice));
+    item.expensePrice = Number(fenToYuan(item.expensePrice));
+  }
+  // 更新 Echarts 数据
+  if (lineChartOptions.dataset && lineChartOptions.dataset.source) {
+    lineChartOptions.dataset.source = list;
+  }
+};
+
+/** 折线图配置 */
+const lineChartOptions = reactive({
+  dataset: {
+    dimensions: [
+      'date',
+      'turnoverPrice',
+      'orderPayPrice',
+      'rechargePrice',
+      'expensePrice',
+    ],
+    source: [] as MallTradeStatisticsApi.TradeTrendSummary[],
+  },
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true,
+  },
+  legend: {
+    top: 50,
+  },
+  series: [
+    { name: '营业额', type: 'line', smooth: true },
+    { name: '商品支付金额', type: 'line', smooth: true },
+    { name: '充值金额', type: 'line', smooth: true },
+    { name: '支出金额', type: 'line', smooth: true },
+  ],
+  toolbox: {
+    feature: {
+      // 数据区域缩放
+      dataZoom: {
+        yAxisIndex: false, // Y轴不缩放
+      },
+      brush: {
+        type: ['lineX', 'clear'] as const, // 区域缩放按钮、还原按钮
+      },
+      saveAsImage: { show: true, name: '交易状况' }, // 保存为图片
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+    },
+    padding: [5, 10],
+  },
+  xAxis: {
+    type: 'category' as const,
+    boundaryGap: false,
+    axisTick: {
+      show: false,
+    },
+  },
+  yAxis: {
+    axisTick: {
+      show: false,
+    },
+  },
+});
+</script>
+<template>
+  <AnalysisChartCard title="交易状况">
+    <template #header-suffix>
+      <!-- 查询条件 -->
+      <ShortcutDateRangePicker
+        ref="shortcutDateRangePicker"
+        @change="getTradeTrendData"
+      >
+        <el-button
+          class="ml-4"
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['statistics:trade:export']"
+        >
+          <Icon icon="ep:download" class="mr-1" />导出
+        </el-button>
+      </ShortcutDateRangePicker>
+    </template>
+    <AnalysisOverviewIcon v-model:model-value="overviewItems" />
+    <EchartsUI height="500px" ref="chartRef" />
+  </AnalysisChartCard>
+</template>
diff --git a/apps/web-ele/src/views/mall/statistics/trade/index.vue b/apps/web-ele/src/views/mall/statistics/trade/index.vue
index dd0e7eb2..4aae9367 100644
--- a/apps/web-ele/src/views/mall/statistics/trade/index.vue
+++ b/apps/web-ele/src/views/mall/statistics/trade/index.vue
@@ -1,7 +1,76 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { MallDataComparisonResp } from '#/api/mall/statistics/common';
+import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
+import type { AnalysisOverviewTradeItem } from '#/views/mall/home/components/data';
 
-import { ElButton } from 'element-plus';
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+import { calculateRelativeRate, fenToYuan } from '@vben/utils';
+
+import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import analysisTradeOverview from '#/views/mall/home/components/analysis-trade-overview.vue';
+
+import TradeTransactionCard from './components/trade-transaction-card.vue';
+
+const overviewItems = ref<AnalysisOverviewTradeItem[]>();
+const summary =
+  ref<MallDataComparisonResp<MallTradeStatisticsApi.TradeSummary>>();
+const loadOverview = () => {
+  overviewItems.value = [
+    {
+      title: '昨日订单数量',
+      value: summary.value?.value?.yesterdayOrderCount || 0,
+      tooltip: '昨日订单数量',
+      percent: calculateRelativeRate(
+        summary?.value?.value?.yesterdayOrderCount,
+        summary.value?.reference?.yesterdayOrderCount,
+      ),
+    },
+    {
+      title: '本月订单数量',
+      value: summary.value?.value?.monthOrderCount || 0,
+      tooltip: '本月订单数量',
+      percent: calculateRelativeRate(
+        summary?.value?.value?.monthOrderCount,
+        summary.value?.reference?.monthOrderCount,
+      ),
+    },
+    {
+      title: '昨日支付金额',
+      value: Number(fenToYuan(summary.value?.value?.yesterdayPayPrice || 0)),
+      tooltip: '昨日支付金额',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.yesterdayPayPrice,
+        summary.value?.reference?.yesterdayPayPrice,
+      ),
+    },
+    {
+      title: '本月支付金额',
+      value: summary.value?.value?.monthPayPrice || 0,
+      tooltip: '本月支付金额',
+      prefix: '￥',
+      decimals: 2,
+      percent: calculateRelativeRate(
+        summary?.value?.value?.monthPayPrice,
+        summary.value?.reference?.monthPayPrice,
+      ),
+    },
+  ];
+};
+
+/** 查询交易统计 */
+const getTradeStatisticsSummary = async () => {
+  summary.value = await TradeStatisticsApi.getTradeStatisticsSummary();
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await getTradeStatisticsSummary();
+  loadOverview();
+});
 </script>
 
 <template>
@@ -10,25 +79,15 @@ import { ElButton } from 'element-plus';
       title="【统计】会员、商品、交易统计"
       url="https://doc.iocoder.cn/mall/statistics/"
     />
-    <ElButton
-      danger
-      type="primary"
-      link
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </ElButton>
-    <br />
-    <ElButton
-      type="primary"
-      link
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/trade/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/trade/index
-      代码，pull request 贡献给我们！
-    </ElButton>
+    <!-- 统计值 -->
+    <div class="mb-4 mt-5 w-full md:flex">
+      <analysisTradeOverview
+        v-model:model-value="overviewItems"
+        class="mt-5 md:mr-4 md:mt-0 md:w-full"
+      />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <TradeTransactionCard class="mt-5 md:mr-4 md:mt-0 md:w-full" />
+    </div>
   </Page>
 </template>
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue b/apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue
new file mode 100644
index 00000000..1c35bcef
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup>
+import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { fenToYuan, formatDate } from '@vben/utils';
+
+import {
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElImage,
+  ElMessage,
+  ElMessageBox,
+  ElTimeline,
+  ElTimelineItem,
+} from 'element-plus';
+
+import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
+import ContentWrap from '#/components/content-wrap/content-wrap.vue';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, getDictLabel, getDictObj } from '#/utils/dict';
+
+import UpdateAuditReasonForm from './disagree-form.vue';
+
+defineOptions({ name: 'TradeAfterSaleDetail' });
+
+const { params } = useRoute(); // 查询参数
+const { push } = useRouter(); // 路由
+const formData = ref<MallAfterSaleApi.AfterSale>({
+  order: {} as MallOrderApi.Order,
+  logs: [] as MallOrderApi.OrderLog[],
+  orderItem: {} as MallOrderApi.OrderItem,
+});
+const updateAuditReasonFormRef = ref(); // 拒绝售后表单 Ref
+
+/** 获得 userType 颜色 */
+const getUserTypeColor = (type: number) => {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, type);
+  switch (dict?.colorType) {
+    case 'danger': {
+      return '#F56C6C';
+    }
+    case 'info': {
+      return '#909399';
+    }
+    case 'success': {
+      return '#67C23A';
+    }
+    case 'warning': {
+      return '#E6A23C';
+    }
+  }
+  return '#409EFF';
+};
+
+/** 获得详情 */
+const getDetail = async () => {
+  const id = params.id as unknown as number;
+  if (id) {
+    const res = await AfterSaleApi.getAfterSale(id);
+    // 没有表单信息则关闭页面返回
+    if (res === null) {
+      ElMessage.error('售后订单不存在');
+      close();
+    }
+    formData.value = res;
+  }
+};
+
+/** 同意售后 */
+const agree = async () => {
+  // 二次确认
+  await ElMessageBox.confirm('是否同意售后？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  await AfterSaleApi.agree(formData.value.id!);
+  // 提示成功
+  ElMessage.success($t('page.common.success'));
+  await getDetail();
+};
+
+/** 拒绝售后 */
+const disagree = async () => {
+  updateAuditReasonFormRef.value?.open(formData.value);
+};
+
+/** 确认收货 */
+const receive = async () => {
+  // 二次确认
+  await ElMessageBox.confirm('是否确认收货？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  await AfterSaleApi.receive(formData.value.id!);
+  // 提示成功
+  ElMessage.success($t('page.common.success'));
+  await getDetail();
+};
+
+/** 拒绝收货 */
+const refuse = async () => {
+  // 二次确认
+  await ElMessageBox.confirm('是否拒绝收货？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  await AfterSaleApi.refuse(formData.value.id!);
+  // 提示成功
+  ElMessage.success($t('page.common.success'));
+  await getDetail();
+};
+
+/** 确认退款 */
+const refund = async () => {
+  // 二次确认
+  await ElMessageBox.confirm('是否确认退款？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  await AfterSaleApi.refund(formData.value.id!);
+  // 提示成功
+  ElMessage.success($t('page.common.success'));
+  await getDetail();
+};
+
+/** 关闭 tag */
+const close = () => {
+  push({ name: 'TradeAfterSale' });
+};
+onMounted(async () => {
+  await getDetail();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <ContentWrap>
+      <!-- 订单信息 -->
+      <ElDescriptions title="订单信息">
+        <ElDescriptionsItem label="订单号: ">
+          {{ formData.orderNo }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="配送方式: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_DELIVERY_TYPE"
+            :value="formData.order?.deliveryType"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单类型: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_ORDER_TYPE"
+            :value="formData.order?.type"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="收货人: ">
+          {{ formData.order?.receiverName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="买家留言: ">
+          {{ formData.order?.userRemark }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单来源: ">
+          <DictTag
+            :type="DICT_TYPE.TERMINAL"
+            :value="formData.order?.terminal"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="联系电话: ">
+          {{ formData.order?.receiverMobile }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="商家备注: ">
+          {{ formData.order?.remark }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="支付单号: ">
+          {{ formData.order?.payOrderId }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="付款方式: ">
+          <DictTag
+            :type="DICT_TYPE.PAY_CHANNEL_CODE"
+            :value="formData.order?.payChannelCode"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="买家: ">
+          {{ formData?.user?.nickname }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 售后信息 -->
+      <ElDescriptions title="售后信息">
+        <ElDescriptionsItem label="退款编号: ">
+          {{ formData.no }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="申请时间: ">
+          {{ formatDate(formData.auditTime) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="售后类型: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_AFTER_SALE_TYPE"
+            :value="formData.type"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="售后方式: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_AFTER_SALE_WAY"
+            :value="formData.way"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="退款金额: ">
+          {{ fenToYuan(formData.refundPrice ?? 0) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="退款原因: ">
+          {{ formData.applyReason }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="补充描述: ">
+          {{ formData.applyDescription }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="凭证图片: ">
+          <ElImage
+            v-for="(item, index) in formData.applyPicUrls"
+            :key="index"
+            :src="item"
+            style="width: 60px; height: 60px; margin-right: 10px"
+            :preview-src-list="formData.applyPicUrls ?? []"
+          />
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 退款状态 -->
+      <ElDescriptions :column="1" title="退款状态">
+        <ElDescriptionsItem label="退款状态: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS"
+            :value="formData.status"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label-class-name="no-colon">
+          <el-button
+            v-if="formData.status === 10"
+            type="primary"
+            @click="agree"
+          >
+            同意售后
+          </el-button>
+          <el-button
+            v-if="formData.status === 10"
+            type="primary"
+            @click="disagree"
+          >
+            拒绝售后
+          </el-button>
+          <el-button
+            v-if="formData.status === 30"
+            type="primary"
+            @click="receive"
+          >
+            确认收货
+          </el-button>
+          <el-button
+            v-if="formData.status === 30"
+            type="primary"
+            @click="refuse"
+          >
+            拒绝收货
+          </el-button>
+          <el-button
+            v-if="formData.status === 40"
+            type="primary"
+            @click="refund"
+          >
+            确认退款
+          </el-button>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label><span style="color: red">提醒: </span></template>
+          如果未发货，请点击同意退款给买家。<br />
+          如果实际已发货，请主动与买家联系。<br />
+          如果订单整体退款后，优惠券和余额会退还给买家.
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 商品信息 -->
+      <ElDescriptions title="商品信息">
+        <ElDescriptionsItem label-class-name="no-colon">
+          <el-row :gutter="20">
+            <el-col :span="15">
+              <el-table
+                v-if="formData.orderItem"
+                :data="[formData.orderItem]"
+                border
+              >
+                <el-table-column label="商品" prop="spuName" width="auto">
+                  <template #default="{ row }">
+                    {{ row.spuName }}
+                    <el-tag
+                      v-for="property in row.properties"
+                      :key="property.propertyId"
+                      class="mr-10px"
+                    >
+                      {{ property.propertyName }}: {{ property.valueName }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="商品原价" prop="price" width="150">
+                  <template #default="{ row }">
+                    {{ fenToYuan(row.price) }} 元
+                  </template>
+                </el-table-column>
+                <el-table-column label="数量" prop="count" width="100" />
+                <el-table-column label="合计" prop="payPrice" width="150">
+                  <template #default="{ row }">
+                    {{ fenToYuan(row.payPrice) }} 元
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+            <el-col :span="10" />
+          </el-row>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 操作日志 -->
+      <ElDescriptions title="售后日志">
+        <ElDescriptionsItem label-class-name="no-colon">
+          <ElTimeline>
+            <ElTimelineItem
+              v-for="saleLog in formData.logs"
+              :key="saleLog.id"
+              :timestamp="formatDate(saleLog.createTime)?.toString()"
+              placement="top"
+            >
+              <div class="el-timeline-right-content">
+                <span>{{ saleLog.content }}</span>
+              </div>
+              <template #dot>
+                <span
+                  :style="{
+                    backgroundColor: getUserTypeColor(saleLog.userType ?? 0),
+                  }"
+                  class="dot-node-style"
+                >
+                  {{
+                    getDictLabel(DICT_TYPE.USER_TYPE, saleLog.userType)[0] ||
+                    '系'
+                  }}
+                </span>
+              </template>
+            </ElTimelineItem>
+          </ElTimeline>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </ContentWrap>
+
+    <!-- 各种操作的弹窗 -->
+    <UpdateAuditReasonForm
+      ref="updateAuditReasonFormRef"
+      @success="getDetail"
+    />
+  </Page>
+</template>
+<style lang="scss" scoped>
+:deep(.el-descriptions) {
+  &:not(:nth-child(1)) {
+    margin-top: 20px;
+  }
+
+  .el-descriptions__title {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      display: inline-block;
+      width: 3px;
+      height: 20px;
+      margin-right: 10px;
+      content: '';
+      background-color: #409eff;
+    }
+  }
+
+  .el-descriptions-item__container {
+    margin: 0 10px;
+
+    .no-colon {
+      margin: 0;
+
+      &::after {
+        content: '';
+      }
+    }
+  }
+}
+
+// 时间线样式调整
+:deep(.el-timeline) {
+  margin: 10px 0 0 160px;
+
+  .el-timeline-item__wrapper {
+    position: relative;
+    top: -20px;
+
+    .el-timeline-item__timestamp {
+      position: absolute !important;
+      top: 10px;
+      left: -150px;
+    }
+  }
+}
+
+/* 单独定义气泡样式，不使用嵌套 */
+:deep(.el-timeline-right-content) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 10px;
+  margin-left: 10px;
+  background-color: #f5f7fa; /* 使用明确的颜色替代变量 */
+  border-radius: 4px;
+}
+
+:deep(.el-timeline-right-content)::before {
+  position: absolute;
+  top: 10px;
+  left: -16px;
+  content: '';
+  border-color: transparent #f5f7fa transparent transparent;
+  border-style: solid;
+  border-width: 8px;
+}
+
+.dot-node-style {
+  position: absolute;
+  left: -5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 10px;
+  color: #fff;
+  border-radius: 50%;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/modules/disagree-form.vue b/apps/web-ele/src/views/mall/trade/afterSale/modules/disagree-form.vue
new file mode 100644
index 00000000..54081616
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/afterSale/modules/disagree-form.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
+import { deliveryOrder } from '#/api/mall/trade/order';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallOrderApi.DeliveryRequest>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    // TODO @xingyu：发货默认选中第一个？
+    {
+      fieldName: 'expressType',
+      label: '发货方式',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '快递', value: 'express' },
+          { label: '无需发货', value: 'none' },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      fieldName: 'logisticsId',
+      label: '物流公司',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleDeliveryExpressList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['expressType'],
+        show: (values) => values.expressType === 'express',
+      },
+    },
+    {
+      fieldName: 'logisticsNo',
+      label: '物流单号',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['expressType'],
+        show: (values) => values.expressType === 'express',
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallOrderApi.DeliveryRequest;
+    if (data.expressType === 'none') {
+      // 无需发货的情况
+      data.logisticsId = 0;
+      data.logisticsNo = '';
+    }
+    try {
+      await deliveryOrder(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallOrderApi.Order>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      if (data.logisticsId === 0) {
+        await formApi.setValues({ expressType: 'none' });
+      }
+      // 设置到 values
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发货">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/brokerage/user/index.vue b/apps/web-ele/src/views/mall/trade/brokerage/user/index.vue
index fc5d9966..7841ac73 100644
--- a/apps/web-ele/src/views/mall/trade/brokerage/user/index.vue
+++ b/apps/web-ele/src/views/mall/trade/brokerage/user/index.vue
@@ -6,7 +6,7 @@ import { useAccess } from '@vben/access';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { ElLoading, ElMessage, ElSwitch } from 'element-plus';
+import { ElLoading, ElMessage, ElMessageBox, ElSwitch } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -68,17 +68,14 @@ function openCreateUserForm() {
 
 /** 清除上级推广人 */
 async function handleClearBindUser(row: MallBrokerageUserApi.BrokerageUser) {
-  const loadingInstance = ElLoading.service({
-    text: `正在清除"${row.nickname}"的上级推广人...`,
-    fullscreen: true,
+  await ElMessageBox.confirm(`确定清除"${row.nickname}"的上级推广人吗？`, {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await clearBindUser({ id: row.id as number });
-    ElMessage.success('清除成功');
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await clearBindUser({ id: row.id as number });
+  ElMessage.success('清除成功');
+  onRefresh();
 }
 
 /** 推广资格：开通/关闭 */
diff --git a/apps/web-ele/src/views/mall/trade/brokerage/withdraw/index.vue b/apps/web-ele/src/views/mall/trade/brokerage/withdraw/index.vue
index 8158bedf..7fd2915f 100644
--- a/apps/web-ele/src/views/mall/trade/brokerage/withdraw/index.vue
+++ b/apps/web-ele/src/views/mall/trade/brokerage/withdraw/index.vue
@@ -4,10 +4,10 @@ import type { MallBrokerageWithdrawApi } from '#/api/mall/trade/brokerage/withdr
 
 import { h } from 'vue';
 
-import { confirm, Page, prompt } from '@vben/common-ui';
+import { Page, prompt } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';
 
-import { ElInput, ElMessage } from 'element-plus';
+import { ElInput, ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -35,14 +35,14 @@ function onRefresh() {
 
 /** 审核通过 */
 async function handleApprove(row: MallBrokerageWithdrawApi.BrokerageWithdraw) {
-  try {
-    await confirm('确定要审核通过吗？');
-    await approveBrokerageWithdraw(row.id);
-    ElMessage.success($t('ui.actionMessage.operationSuccess'));
-    onRefresh();
-  } catch (error) {
-    console.error('审核失败:', error);
-  }
+  await ElMessageBox.confirm('确定要审核通过吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  await approveBrokerageWithdraw(row.id);
+  ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  onRefresh();
 }
 
 /** 审核驳回 */
@@ -73,14 +73,14 @@ function handleReject(row: MallBrokerageWithdrawApi.BrokerageWithdraw) {
 async function handleRetryTransfer(
   row: MallBrokerageWithdrawApi.BrokerageWithdraw,
 ) {
-  try {
-    await confirm('确定要重新转账吗？');
-    await approveBrokerageWithdraw(row.id);
-    ElMessage.success($t('ui.actionMessage.operationSuccess'));
-    onRefresh();
-  } catch (error) {
-    console.error('重新转账失败:', error);
-  }
+  await ElMessageBox.confirm('确定要重新转账吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  await approveBrokerageWithdraw(row.id);
+  ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/mall/trade/delivery/express/index.vue b/apps/web-ele/src/views/mall/trade/delivery/express/index.vue
index 15bc231d..73091003 100644
--- a/apps/web-ele/src/views/mall/trade/delivery/express/index.vue
+++ b/apps/web-ele/src/views/mall/trade/delivery/express/index.vue
@@ -5,7 +5,7 @@ import type { MallDeliveryExpressApi } from '#/api/mall/trade/delivery/express';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -46,16 +46,14 @@ function handleEdit(row: MallDeliveryExpressApi.DeliveryExpress) {
 
 /** 删除快递公司 */
 async function handleDelete(row: MallDeliveryExpressApi.DeliveryExpress) {
-  const hideLoading = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
+  await ElMessageBox.confirm($t('ui.actionMessage.deleting', [row.name]), {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteDeliveryExpress(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    hideLoading.close();
-  }
+  await deleteDeliveryExpress(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/index.vue b/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/index.vue
index b3b68be7..594d2869 100644
--- a/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/index.vue
+++ b/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/index.vue
@@ -4,7 +4,7 @@ import type { MallDeliveryExpressTemplateApi } from '#/api/mall/trade/delivery/e
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -40,16 +40,14 @@ function handleEdit(row: MallDeliveryExpressTemplateApi.ExpressTemplate) {
 async function handleDelete(
   row: MallDeliveryExpressTemplateApi.ExpressTemplate,
 ) {
-  const hideLoading = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
+  await ElMessageBox.confirm($t('ui.actionMessage.deleting', [row.name]), {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteDeliveryExpressTemplate(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    hideLoading.close();
-  }
+  await deleteDeliveryExpressTemplate(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/data.ts b/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/data.ts
index a0208038..8b03d72c 100644
--- a/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/data.ts
+++ b/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/data.ts
@@ -35,10 +35,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleDeliveryPickUpStoreList,
-        fieldNames: {
-          label: 'name',
-          value: 'id',
-        },
+        labelField: 'name',
+        valueField: 'id',
       },
       dependencies: {
         triggerFields: ['deliveryType'],
diff --git a/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts
index ac3e0828..86b08471 100644
--- a/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts
+++ b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts
@@ -51,7 +51,9 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiTreeSelect',
       componentProps: {
         api: () => getAreaTree(),
-        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
       },
     },
     {
@@ -130,7 +132,8 @@ export function useBindFormSchema(): VbenFormSchema[] {
       rules: 'required',
       componentProps: {
         api: () => getSimpleUserList(),
-        fieldNames: { label: 'nickname', value: 'id' },
+        labelField: 'nickname',
+        valueField: 'id',
         mode: 'tags',
         allowClear: true,
       },
diff --git a/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/index.vue b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/index.vue
index 57214fb3..bd471629 100644
--- a/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/index.vue
+++ b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/index.vue
@@ -4,7 +4,7 @@ import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickU
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -49,16 +49,14 @@ function handleBind(row: MallDeliveryPickUpStoreApi.PickUpStore) {
 
 /** 删除门店 */
 async function handleDelete(row: MallDeliveryPickUpStoreApi.PickUpStore) {
-  const hideLoading = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
+  await ElMessageBox.confirm('确定要删除该门店吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteDeliveryPickUpStore(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    hideLoading.close();
-  }
+  await deleteDeliveryPickUpStore(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/mall/trade/order/modules/delevery-form.vue b/apps/web-ele/src/views/mall/trade/order/modules/delevery-form.vue
index 92fd9fec..54081616 100644
--- a/apps/web-ele/src/views/mall/trade/order/modules/delevery-form.vue
+++ b/apps/web-ele/src/views/mall/trade/order/modules/delevery-form.vue
@@ -54,10 +54,8 @@ const [Form, formApi] = useVbenForm({
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleDeliveryExpressList,
-        fieldNames: {
-          label: 'name',
-          value: 'id',
-        },
+        labelField: 'name',
+        valueField: 'id',
       },
       dependencies: {
         triggerFields: ['expressType'],
diff --git a/apps/web-ele/src/views/mall/trade/order/modules/detail.vue b/apps/web-ele/src/views/mall/trade/order/modules/detail.vue
new file mode 100644
index 00000000..b7536688
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/order/modules/detail.vue
@@ -0,0 +1,561 @@
+<script lang="ts" setup>
+import type { MallDeliveryExpressApi } from '#/api/mall/trade/delivery/express';
+import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { fenToYuan, formatDate } from '@vben/utils';
+
+import {
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElMessage,
+  ElMessageBox,
+  ElTimeline,
+  ElTimelineItem,
+} from 'element-plus';
+
+import * as DeliveryExpressApi from '#/api/mall/trade/delivery/express';
+import * as DeliveryPickUpStoreApi from '#/api/mall/trade/delivery/pickUpStore';
+import * as TradeOrderApi from '#/api/mall/trade/order';
+import ContentWrap from '#/components/content-wrap/content-wrap.vue';
+import { DictTag } from '#/components/dict-tag';
+import { DeliveryTypeEnum, TradeOrderStatusEnum } from '#/utils/constants';
+import { DICT_TYPE, getDictLabel, getDictObj } from '#/utils/dict';
+
+import OrderDeliveryForm from './delevery-form.vue';
+import OrderUpdateAddressForm from './update-address-form.vue';
+import OrderUpdatePriceForm from './update-price-form.vue';
+import OrderUpdateRemarkForm from './update-remark-form.vue';
+
+defineOptions({ name: 'TradeOrderDetail' });
+
+// 查询参数
+const props = defineProps({
+  id: {
+    type: Number,
+    default: undefined,
+  }, // 订单ID
+  showPickUp: {
+    type: Boolean,
+    default: true,
+  }, // 显示核销按钮
+});
+
+const [OrderDeliveryFormModal, formModalApi] = useVbenModal({
+  connectedComponent: OrderDeliveryForm,
+  destroyOnClose: true,
+});
+
+const [OrderUpdateRemarkFormModal, remarkFormModalApi] = useVbenModal({
+  connectedComponent: OrderUpdateRemarkForm,
+  destroyOnClose: true,
+});
+
+const [OrderUpdateAddressFormModal, addressFormModalApi] = useVbenModal({
+  connectedComponent: OrderUpdateAddressForm,
+  destroyOnClose: true,
+});
+
+const [OrderUpdatePriceFormModal, priceFormModalApi] = useVbenModal({
+  connectedComponent: OrderUpdatePriceForm,
+  destroyOnClose: true,
+});
+
+/** 获得 userType 颜色 */
+const getUserTypeColor = (type: number) => {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, type);
+  switch (dict?.colorType) {
+    case 'danger': {
+      return '#F56C6C';
+    }
+    case 'info': {
+      return '#909399';
+    }
+    case 'success': {
+      return '#67C23A';
+    }
+    case 'warning': {
+      return '#E6A23C';
+    }
+  }
+  return '#409EFF';
+};
+
+// 订单详情
+const formData = ref<MallOrderApi.Order>({
+  logs: [],
+});
+
+/** 各种操作 */
+const remark = () => {
+  remarkFormModalApi.setData(formData.value).open();
+};
+
+const delivery = () => {
+  formModalApi.setData(formData.value).open();
+};
+const updateAddress = () => {
+  addressFormModalApi.setData(formData.value).open();
+};
+
+const updatePrice = () => {
+  priceFormModalApi.setData(formData.value).open();
+};
+
+/** 核销 */
+const handlePickUp = async () => {
+  // 二次确认
+  await ElMessageBox.confirm('确认核销订单吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  // 提交
+  await TradeOrderApi.pickUpOrder(formData.value.id!);
+  ElMessage.success('核销成功');
+  // 刷新列表
+  await getDetail();
+};
+
+/** 获得详情 */
+const { params } = useRoute();
+const id = (params.id || props.id) as unknown as number;
+const getDetail = async () => {
+  if (id) {
+    const res = (await TradeOrderApi.getOrder(id)) as MallOrderApi.Order;
+    // 没有表单信息则关闭页面返回
+    if (!res) {
+      ElMessage.error('交易订单不存在');
+      close();
+    }
+    formData.value = res;
+  }
+};
+
+/** 关闭 tag */
+const { push } = useRouter(); // 路由
+const close = () => {
+  push({ name: 'TradeOrder' });
+};
+
+/** 复制 */
+const clipboardSuccess = () => {
+  ElMessage.success('复制成功');
+};
+
+/** 初始化 */
+const deliveryExpressList = ref<MallDeliveryExpressApi.SimpleDeliveryExpress[]>(
+  [],
+);
+// 物流公司
+const expressTrackList = ref<MallOrderApi.OrderExpressTrackRespDTO[]>([]); // 物流详情
+const pickUpStore = ref<MallDeliveryPickUpStoreApi.PickUpStore>(
+  {} as MallDeliveryPickUpStoreApi.PickUpStore,
+); // 自提门店
+onMounted(async () => {
+  await getDetail();
+  // 如果配送方式为快递，则查询物流公司
+  if (formData.value.deliveryType === DeliveryTypeEnum.EXPRESS.type) {
+    deliveryExpressList.value =
+      await DeliveryExpressApi.getSimpleDeliveryExpressList();
+    if (formData.value.logisticsId) {
+      expressTrackList.value = await TradeOrderApi.getExpressTrackList(
+        formData.value.id!,
+      );
+    }
+  } else if (
+    formData.value.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
+    formData.value.pickUpStoreId
+  ) {
+    pickUpStore.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(
+      formData.value.pickUpStoreId,
+    );
+  }
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <ContentWrap>
+      <!-- 订单信息 -->
+      <ElDescriptions title="订单信息">
+        <ElDescriptionsItem label="订单号: ">
+          {{ formData.no }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="买家: ">
+          {{ formData?.user?.nickname }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单类型: ">
+          <DictTag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="formData.type!" />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单来源: ">
+          <DictTag :type="DICT_TYPE.TERMINAL" :value="formData.terminal!" />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="买家留言: ">
+          {{ formData.userRemark }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="商家备注: ">
+          {{ formData.remark }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="支付单号: ">
+          {{ formData.payOrderId }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="付款方式: ">
+          <DictTag
+            :type="DICT_TYPE.PAY_CHANNEL_CODE"
+            :value="formData.payChannelCode!"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem v-if="formData.brokerageUser" label="推广用户: ">
+          {{ formData.brokerageUser?.nickname }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 订单状态 -->
+      <ElDescriptions :column="1" title="订单状态">
+        <ElDescriptionsItem label="订单状态: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_ORDER_STATUS"
+            :value="formData.status!"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem
+          v-hasPermi="['trade:order:update']"
+          label-class-name="no-colon"
+        >
+          <el-button
+            v-if="formData.status! === TradeOrderStatusEnum.UNPAID.status"
+            type="primary"
+            @click="updatePrice"
+          >
+            调整价格
+          </el-button>
+          <el-button type="primary" @click="remark">备注</el-button>
+          <!-- 待发货 -->
+          <template
+            v-if="formData.status! === TradeOrderStatusEnum.UNDELIVERED.status"
+          >
+            <!-- 快递发货 -->
+            <el-button
+              v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type"
+              type="primary"
+              @click="delivery"
+            >
+              发货
+            </el-button>
+            <el-button
+              v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type"
+              type="primary"
+              @click="updateAddress"
+            >
+              修改地址
+            </el-button>
+            <!-- 到店自提 -->
+            <el-button
+              v-if="
+                formData.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
+                showPickUp
+              "
+              type="primary"
+              @click="handlePickUp"
+            >
+              核销
+            </el-button>
+          </template>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label>
+            <span style="color: red">提醒: </span>
+          </template>
+          <el-text>
+            买家付款成功后，货款将直接进入您的商户号（微信、支付宝）<br />
+            请及时关注你发出的包裹状态，确保可以配送至买家手中 <br />
+            如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商
+          </el-text>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 商品信息 -->
+      <ElDescriptions title="商品信息">
+        <ElDescriptionsItem label-class-name="no-colon">
+          <el-row :gutter="20">
+            <el-col :span="15">
+              <el-table :data="formData.items" border>
+                <el-table-column label="商品" prop="spuName" width="auto">
+                  <template #default="{ row }">
+                    {{ row.spuName }}
+                    <el-tag
+                      v-for="property in row.properties"
+                      :key="property.propertyId"
+                    >
+                      {{ property.propertyName }}: {{ property.valueName }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="商品原价" prop="price" width="150">
+                  <template #default="{ row }">
+                    {{ fenToYuan(row.price) }}元
+                  </template>
+                </el-table-column>
+                <el-table-column label="数量" prop="count" width="100" />
+                <el-table-column label="合计" prop="payPrice" width="150">
+                  <template #default="{ row }">
+                    {{ fenToYuan(row.payPrice) }}元
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="售后状态"
+                  prop="afterSaleStatus"
+                  width="120"
+                >
+                  <template #default="{ row }">
+                    <DictTag
+                      :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
+                      :value="row.afterSaleStatus"
+                    />
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+            <el-col :span="10" />
+          </el-row>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+      <ElDescriptions :column="4">
+        <!-- 第一层 -->
+        <ElDescriptionsItem label="商品总额: ">
+          {{ fenToYuan(formData.totalPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="运费金额: ">
+          {{ fenToYuan(formData.deliveryPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单调价: ">
+          {{ fenToYuan(formData.adjustPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem
+          v-for="item in 1"
+          :key="item"
+          label-class-name="no-colon"
+        />
+        <!-- 第二层 -->
+        <ElDescriptionsItem>
+          <template #label>
+            <span style="color: red">优惠劵优惠: </span>
+          </template>
+          {{ fenToYuan(formData.couponPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label><span style="color: red">VIP 优惠: </span></template>
+          {{ fenToYuan(formData.vipPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label><span style="color: red">活动优惠: </span></template>
+          {{ fenToYuan(formData.discountPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label><span style="color: red">积分抵扣: </span></template>
+          {{ fenToYuan(formData.pointPrice!) }} 元
+        </ElDescriptionsItem>
+        <!-- 第三层 -->
+        <ElDescriptionsItem
+          v-for="item in 3"
+          :key="item"
+          label-class-name="no-colon"
+        />
+        <ElDescriptionsItem label="应付金额: ">
+          {{ fenToYuan(formData.payPrice!) }} 元
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 物流信息 -->
+      <ElDescriptions :column="4" title="收货信息">
+        <ElDescriptionsItem label="配送方式: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_DELIVERY_TYPE"
+            :value="formData.deliveryType!"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="收货人: ">
+          {{ formData.receiverName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="联系电话: ">
+          {{ formData.receiverMobile }}
+        </ElDescriptionsItem>
+        <!-- 快递配送 -->
+        <div v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type">
+          <ElDescriptionsItem
+            v-if="formData.receiverDetailAddress"
+            label="收货地址: "
+          >
+            {{ formData.receiverAreaName }} {{ formData.receiverDetailAddress }}
+            <el-link
+              v-clipboard:copy="
+                `${formData.receiverAreaName} ${formData.receiverDetailAddress}`
+              "
+              v-clipboard:success="clipboardSuccess"
+              icon="ep:document-copy"
+              type="primary"
+            />
+          </ElDescriptionsItem>
+          <ElDescriptionsItem v-if="formData.logisticsId" label="物流公司: ">
+            {{
+              deliveryExpressList.find(
+                (item) => item.id === formData.logisticsId,
+              )?.name
+            }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem v-if="formData.logisticsId" label="运单号: ">
+            {{ formData.logisticsNo }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem v-if="formData.deliveryTime" label="发货时间: ">
+            {{ formatDate(formData.deliveryTime) }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem
+            v-for="item in 2"
+            :key="item"
+            label-class-name="no-colon"
+          />
+          <ElDescriptionsItem
+            v-if="expressTrackList.length > 0"
+            label="物流详情: "
+          >
+            <ElTimeline>
+              <ElTimelineItem
+                v-for="(express, index) in expressTrackList"
+                :key="index"
+                :timestamp="formatDate(express.time)?.toString()"
+              >
+                {{ express.content }}
+              </ElTimelineItem>
+            </ElTimeline>
+          </ElDescriptionsItem>
+        </div>
+        <!-- 自提门店 -->
+        <div v-if="formData.deliveryType === DeliveryTypeEnum.PICK_UP.type">
+          <ElDescriptionsItem v-if="formData.pickUpStoreId" label="自提门店: ">
+            {{ pickUpStore?.name }}
+          </ElDescriptionsItem>
+        </div>
+      </ElDescriptions>
+
+      <!-- 订单日志 -->
+      <ElDescriptions title="订单操作日志">
+        <ElDescriptionsItem label-class-name="no-colon">
+          <ElTimeline>
+            <ElTimelineItem
+              v-for="(log, index) in formData.logs"
+              :key="index"
+              :timestamp="formatDate(log.createTime!)!.toString()"
+              placement="top"
+            >
+              <div class="el-timeline-right-content">
+                {{ log.content }}
+              </div>
+              <template #dot>
+                <span
+                  :style="{ backgroundColor: getUserTypeColor(log.userType!) }"
+                  class="dot-node-style"
+                >
+                  {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
+                </span>
+              </template>
+            </ElTimelineItem>
+          </ElTimeline>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </ContentWrap>
+
+    <!-- 各种操作的弹窗 -->
+    <OrderDeliveryFormModal @success="getDetail" />
+    <OrderUpdateRemarkFormModal @success="getDetail" />
+    <OrderUpdateAddressFormModal @success="getDetail" />
+    <OrderUpdatePriceFormModal @success="getDetail" />
+  </Page>
+</template>
+<style lang="scss" scoped>
+:deep(.el-descriptions) {
+  &:not(:nth-child(1)) {
+    margin-top: 20px;
+  }
+
+  .el-descriptions__title {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      display: inline-block;
+      width: 3px;
+      height: 20px;
+      margin-right: 10px;
+      content: '';
+      background-color: #409eff;
+    }
+  }
+
+  .el-descriptions-item__container {
+    margin: 0 10px;
+
+    .no-colon {
+      margin: 0;
+
+      &::after {
+        content: '';
+      }
+    }
+  }
+}
+
+// 时间线样式调整
+:deep(.el-timeline) {
+  margin: 10px 0 0 160px;
+
+  .el-timeline-item__wrapper {
+    position: relative;
+    top: -20px;
+
+    .el-timeline-item__timestamp {
+      position: absolute !important;
+      top: 10px;
+      left: -150px;
+    }
+  }
+}
+
+/* 单独定义气泡样式，不使用嵌套 */
+:deep(.el-timeline-right-content) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 10px;
+  margin-left: 10px;
+  background-color: #f5f7fa; /* 使用明确的颜色替代变量 */
+  border-radius: 4px;
+}
+
+:deep(.el-timeline-right-content)::before {
+  position: absolute;
+  top: 10px;
+  left: -16px;
+  content: '';
+  border-color: transparent #f5f7fa transparent transparent;
+  border-style: solid;
+  border-width: 8px;
+}
+
+.dot-node-style {
+  position: absolute;
+  left: -5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 10px;
+  color: #fff;
+  border-radius: 50%;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/trade/order/modules/update-address-form.vue b/apps/web-ele/src/views/mall/trade/order/modules/update-address-form.vue
new file mode 100644
index 00000000..c68d5fe7
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/order/modules/update-address-form.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { updateOrderAddress } from '#/api/mall/trade/order';
+import { getAreaTree } from '#/api/system/area';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallOrderApi.DeliveryRequest>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    // TODO @xingyu：发货默认选中第一个？
+    {
+      fieldName: 'receiverName',
+      label: '收件人',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收件人名称',
+      },
+    },
+    {
+      fieldName: 'receiverMobile',
+      label: '手机号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收件人手机号',
+      },
+    },
+    {
+      fieldName: 'receiverAreaId',
+      label: '所在地',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: () => getAreaTree(),
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择收件人所在地',
+        treeDefaultExpandAll: true,
+      },
+    },
+    {
+      fieldName: 'receiverDetailAddress',
+      label: '详细地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收件人详细地址',
+        type: 'textarea',
+        rows: 3,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallOrderApi.AddressRequest;
+    try {
+      await updateOrderAddress(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallOrderApi.Order>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      await formApi.setValues({
+        id: data.id,
+        receiverName: data.receiverName,
+        receiverMobile: data.receiverMobile,
+        receiverAreaId: data.receiverAreaId,
+        receiverDetailAddress: data.receiverDetailAddress,
+      });
+      // 设置到 values
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发货">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/order/modules/update-price-form.vue b/apps/web-ele/src/views/mall/trade/order/modules/update-price-form.vue
new file mode 100644
index 00000000..1728944c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/order/modules/update-price-form.vue
@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { floatToFixed2 } from '@vben/utils';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { updateOrderPrice } from '#/api/mall/trade/order';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallOrderApi.DeliveryRequest>();
+const newPayPrice = ref<string>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    // TODO @xingyu：发货默认选中第一个？
+    {
+      fieldName: 'payPrice',
+      label: '应付金额(总)',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入应付金额(总)',
+        disabled: true,
+        formatter: (value: string) => `${floatToFixed2(value)}元`,
+      },
+    },
+    {
+      fieldName: 'adjustPrice',
+      label: '订单调价',
+      component: 'InputNumber',
+      componentProps: {
+        class: 'w-100%',
+        placeholder: '请输入订单调价',
+        step: 0.1,
+        precision: 2,
+        onChange: async (value: number) => {
+          const { payPrice } = await formApi.getValues();
+          await formApi.setValues({
+            newPayPrice: (payPrice + value * 100).toFixed(2),
+          });
+        },
+      },
+      description: '订单调价。 正数，加价；负数，减价',
+    },
+    {
+      fieldName: 'newPayPrice',
+      label: '调价后',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+        formatter: (value: string) => `${floatToFixed2(value)}元`,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallOrderApi.PriceRequest;
+    if (data.adjustPrice) {
+      data.adjustPrice = data.adjustPrice * 100;
+    }
+    try {
+      await updateOrderPrice(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallOrderApi.Order>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      newPayPrice.value = data.payPrice?.toString();
+      data.adjustPrice = data.adjustPrice ? data.adjustPrice / 100 : 0;
+      await formApi.setValues({
+        id: data.id,
+        payPrice: data.payPrice,
+        adjustPrice: data.adjustPrice,
+        newPayPrice: newPayPrice.value,
+      });
+      // 设置到 values
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发货">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/order/modules/update-remark-form.vue b/apps/web-ele/src/views/mall/trade/order/modules/update-remark-form.vue
new file mode 100644
index 00000000..b84767ca
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/order/modules/update-remark-form.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { updateOrderRemark } from '#/api/mall/trade/order';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallOrderApi.DeliveryRequest>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    // TODO @xingyu：发货默认选中第一个？
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        type: 'textarea',
+        rows: 3,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallOrderApi.RemarkRequest;
+    try {
+      await updateOrderRemark(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallOrderApi.Order>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      await formApi.setValues({ id: data.id, remark: data.remark });
+      // 设置到 values
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发货">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/member/group/index.vue b/apps/web-ele/src/views/member/group/index.vue
index 69ae7a4e..4bfbe132 100644
--- a/apps/web-ele/src/views/member/group/index.vue
+++ b/apps/web-ele/src/views/member/group/index.vue
@@ -4,7 +4,7 @@ import type { MemberGroupApi } from '#/api/member/group';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteGroup, getGroupPage } from '#/api/member/group';
@@ -35,17 +35,14 @@ function handleEdit(row: MemberGroupApi.Group) {
 
 /** 删除分组 */
 async function handleDelete(row: MemberGroupApi.Group) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该分组吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteGroup(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteGroup(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/member/level/index.vue b/apps/web-ele/src/views/member/level/index.vue
index ede8ea00..3f3e9e55 100644
--- a/apps/web-ele/src/views/member/level/index.vue
+++ b/apps/web-ele/src/views/member/level/index.vue
@@ -4,7 +4,7 @@ import type { MemberLevelApi } from '#/api/member/level';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteLevel, getLevelList } from '#/api/member/level';
@@ -35,17 +35,14 @@ function handleEdit(row: MemberLevelApi.Level) {
 
 /** 删除等级 */
 async function handleDelete(row: MemberLevelApi.Level) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该等级吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteLevel(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteLevel(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/member/tag/index.vue b/apps/web-ele/src/views/member/tag/index.vue
index 08ed6c91..7c88b9ca 100644
--- a/apps/web-ele/src/views/member/tag/index.vue
+++ b/apps/web-ele/src/views/member/tag/index.vue
@@ -4,7 +4,7 @@ import type { MemberTagApi } from '#/api/member/tag';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteMemberTag, getMemberTagPage } from '#/api/member/tag';
@@ -35,17 +35,14 @@ function handleEdit(row: MemberTagApi.Tag) {
 
 /** 删除会员标签 */
 async function handleDelete(row: MemberTagApi.Tag) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该会员标签吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteMemberTag(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteMemberTag(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/member/user/data.ts b/apps/web-ele/src/views/member/user/data.ts
index 12c5353a..aaadde5f 100644
--- a/apps/web-ele/src/views/member/user/data.ts
+++ b/apps/web-ele/src/views/member/user/data.ts
@@ -86,7 +86,9 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '所在地',
       componentProps: {
         api: () => getAreaTree(),
-        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
       },
     },
     {
@@ -95,7 +97,8 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '用户标签',
       componentProps: {
         api: () => getSimpleTagList(),
-        fieldNames: { label: 'name', value: 'id' },
+        labelField: 'name',
+        valueField: 'id',
         mode: 'multiple',
       },
     },
@@ -105,7 +108,8 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '用户分组',
       componentProps: {
         api: () => getSimpleGroupList(),
-        fieldNames: { label: 'name', value: 'id' },
+        labelField: 'name',
+        valueField: 'id',
       },
     },
     {
@@ -151,7 +155,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: () => getSimpleTagList(),
-        fieldNames: { label: 'name', value: 'id' },
+        labelField: 'name',
+        valueField: 'id',
         mode: 'multiple',
       },
     },
@@ -161,7 +166,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: () => getSimpleLevelList(),
-        fieldNames: { label: 'name', value: 'id' },
+        labelField: 'name',
+        valueField: 'id',
       },
     },
     {
@@ -170,7 +176,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: () => getSimpleGroupList(),
-        fieldNames: { label: 'name', value: 'id' },
+        labelField: 'name',
+        valueField: 'id',
       },
     },
   ];
@@ -290,7 +297,8 @@ export function useLeavelFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: () => getSimpleLevelList(),
-        fieldNames: { label: 'name', value: 'id' },
+        labelField: 'name',
+        valueField: 'id',
       },
     },
     {
diff --git a/apps/web-ele/src/views/pay/app/index.vue b/apps/web-ele/src/views/pay/app/index.vue
index e5547027..ce68d0b1 100644
--- a/apps/web-ele/src/views/pay/app/index.vue
+++ b/apps/web-ele/src/views/pay/app/index.vue
@@ -4,7 +4,7 @@ import type { PayAppApi } from '#/api/pay/app/index';
 
 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { changeAppStatus, deleteApp, getAppPage } from '#/api/pay/app/index';
@@ -39,17 +39,14 @@ function handleEdit(row: Required<PayAppApi.App>) {
 }
 
 async function handleDelete(row: Required<PayAppApi.App>) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该应用吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteApp(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteApp(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 更新状态 */
diff --git a/apps/web-ele/src/views/pay/wallet/rechargePackage/index.vue b/apps/web-ele/src/views/pay/wallet/rechargePackage/index.vue
index e4d9ed3f..9212b783 100644
--- a/apps/web-ele/src/views/pay/wallet/rechargePackage/index.vue
+++ b/apps/web-ele/src/views/pay/wallet/rechargePackage/index.vue
@@ -3,7 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -37,17 +37,14 @@ function handleEdit(row: any) {
 
 /** 删除套餐 */
 async function handleDelete(row: any) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该充值套餐吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deletePackage(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deletePackage(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-ele/src/views/system/dept/index.vue b/apps/web-ele/src/views/system/dept/index.vue
index 5497dbf7..6672671b 100644
--- a/apps/web-ele/src/views/system/dept/index.vue
+++ b/apps/web-ele/src/views/system/dept/index.vue
@@ -11,7 +11,7 @@ import { onMounted, ref } from 'vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Plus } from '@vben/icons';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteDept, getDeptList } from '#/api/system/dept';
@@ -62,19 +62,14 @@ function onEdit(row: SystemDeptApi.Dept) {
 
 /** 删除部门 */
 async function onDelete(row: SystemDeptApi.Dept) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该部门吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteDept(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } catch {
-    // 异常处理
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteDept(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 表格操作按钮的回调函数 */
diff --git a/apps/web-ele/src/views/system/dict/modules/data-grid.vue b/apps/web-ele/src/views/system/dict/modules/data-grid.vue
index feac8d7d..1f62c829 100644
--- a/apps/web-ele/src/views/system/dict/modules/data-grid.vue
+++ b/apps/web-ele/src/views/system/dict/modules/data-grid.vue
@@ -10,7 +10,7 @@ import { ref, watch } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -59,32 +59,26 @@ function onEdit(row: any) {
 
 /** 删除字典数据 */
 async function onDelete(row: any) {
-  const loadingInstance = ElLoading.service({
-    text: $t('common.processing'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该字典数据吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteDictData(row.id);
-    ElMessage.success($t('common.operationSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteDictData(row.id);
+  ElMessage.success($t('common.operationSuccess'));
+  onRefresh();
 }
 
 /** 批量删除字典数据 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该字典数据吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteDictDataList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteDictDataList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/system/dict/modules/type-grid.vue b/apps/web-ele/src/views/system/dict/modules/type-grid.vue
index bc769e8f..76eb3b7a 100644
--- a/apps/web-ele/src/views/system/dict/modules/type-grid.vue
+++ b/apps/web-ele/src/views/system/dict/modules/type-grid.vue
@@ -10,7 +10,7 @@ import { ref } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -54,32 +54,26 @@ function onEdit(row: any) {
 
 /** 删除字典类型 */
 async function onDelete(row: SystemDictTypeApi.DictType) {
-  const loadingInstance = ElLoading.service({
-    text: $t('common.processing'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该字典类型吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteDictType(row.id as number);
-    ElMessage.success($t('common.operationSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteDictType(row.id as number);
+  ElMessage.success($t('common.operationSuccess'));
+  onRefresh();
 }
 
 /** 批量删除字典类型 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该字典类型吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteDictTypeList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteDictTypeList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/system/mail/account/index.vue b/apps/web-ele/src/views/system/mail/account/index.vue
index ec5086fe..cad8e037 100644
--- a/apps/web-ele/src/views/system/mail/account/index.vue
+++ b/apps/web-ele/src/views/system/mail/account/index.vue
@@ -10,7 +10,7 @@ import { ref } from 'vue';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -45,32 +45,26 @@ function onEdit(row: SystemMailAccountApi.MailAccount) {
 
 /** 删除邮箱账号 */
 async function onDelete(row: SystemMailAccountApi.MailAccount) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.mail]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该邮箱账号吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteMailAccount(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.mail]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteMailAccount(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.mail]));
+  onRefresh();
 }
 
 /** 批量删除邮箱账号 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该邮箱账号吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteMailAccountList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteMailAccountList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/system/mail/template/index.vue b/apps/web-ele/src/views/system/mail/template/index.vue
index 4ff1c606..505eff17 100644
--- a/apps/web-ele/src/views/system/mail/template/index.vue
+++ b/apps/web-ele/src/views/system/mail/template/index.vue
@@ -11,7 +11,7 @@ import { onMounted, ref } from 'vue';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSimpleMailAccountList } from '#/api/system/mail/account';
@@ -65,32 +65,26 @@ function onSend(row: SystemMailTemplateApi.MailTemplate) {
 
 /** 删除邮件模板 */
 async function onDelete(row: SystemMailTemplateApi.MailTemplate) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该邮件模板吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteMailTemplate(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteMailTemplate(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 批量删除邮件模板 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该邮件模板吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteMailTemplateList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteMailTemplateList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/system/menu/index.vue b/apps/web-ele/src/views/system/menu/index.vue
index 50bfb50f..a9dffccc 100644
--- a/apps/web-ele/src/views/system/menu/index.vue
+++ b/apps/web-ele/src/views/system/menu/index.vue
@@ -10,7 +10,7 @@ import { ref } from 'vue';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon, Plus } from '@vben/icons';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteMenu, getMenuList } from '#/api/system/menu';
@@ -47,19 +47,14 @@ function onEdit(row: SystemMenuApi.Menu) {
 
 /** 删除菜单 */
 async function onDelete(row: SystemMenuApi.Menu) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该菜单吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteMenu(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } catch {
-    // 异常处理
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteMenu(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 表格操作按钮的回调函数 */
diff --git a/apps/web-ele/src/views/system/notice/index.vue b/apps/web-ele/src/views/system/notice/index.vue
index 150efc40..2835e8b5 100644
--- a/apps/web-ele/src/views/system/notice/index.vue
+++ b/apps/web-ele/src/views/system/notice/index.vue
@@ -10,7 +10,7 @@ import { ref } from 'vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -46,36 +46,26 @@ function onEdit(row: SystemNoticeApi.Notice) {
 
 /** 删除公告 */
 async function onDelete(row: SystemNoticeApi.Notice) {
-  const loadingInstance = ElMessage({
-    message: $t('ui.actionMessage.deleting', [row.title]),
-    type: 'info',
-    duration: 0,
+  await ElMessageBox.confirm('确定要删除该公告吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteNotice(row.id as number);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteNotice(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
+  onRefresh();
 }
 
 /** 批量删除公告 */
 async function onDeleteBatch() {
-  const loadingInstance = ElMessage({
-    message: $t('ui.actionMessage.deleting'),
-    type: 'info',
-    duration: 0,
+  await ElMessageBox.confirm('确定要删除该公告吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteNoticeList(checkedIds.value);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteNoticeList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/system/oauth2/client/index.vue b/apps/web-ele/src/views/system/oauth2/client/index.vue
index 4329a8a4..61530839 100644
--- a/apps/web-ele/src/views/system/oauth2/client/index.vue
+++ b/apps/web-ele/src/views/system/oauth2/client/index.vue
@@ -10,7 +10,7 @@ import { ref } from 'vue';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -45,32 +45,26 @@ function onEdit(row: SystemOAuth2ClientApi.OAuth2Client) {
 
 /** 删除 OAuth2 客户端 */
 async function onDelete(row: SystemOAuth2ClientApi.OAuth2Client) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该 OAuth2 客户端吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteOAuth2Client(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteOAuth2Client(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 批量删除 OAuth2 客户端 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该 OAuth2 客户端吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteOAuth2ClientList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteOAuth2ClientList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/system/oauth2/token/index.vue b/apps/web-ele/src/views/system/oauth2/token/index.vue
index fabc8de0..e0edcf38 100644
--- a/apps/web-ele/src/views/system/oauth2/token/index.vue
+++ b/apps/web-ele/src/views/system/oauth2/token/index.vue
@@ -7,7 +7,7 @@ import type { SystemOAuth2TokenApi } from '#/api/system/oauth2/token';
 
 import { DocAlert, Page } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -25,19 +25,14 @@ function onRefresh() {
 
 /** 删除 OAuth2 令牌 */
 async function onDelete(row: SystemOAuth2TokenApi.OAuth2Token) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', ['令牌']),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该令牌吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteOAuth2Token(row.accessToken);
-    ElMessage.success($t('ui.actionMessage.operationSuccess'));
-    onRefresh();
-  } catch {
-    // 异常处理
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteOAuth2Token(row.accessToken);
+  ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  onRefresh();
 }
 
 /** 表格操作按钮的回调函数 */
diff --git a/apps/web-ele/src/views/system/operatelog/data.ts b/apps/web-ele/src/views/system/operatelog/data.ts
index e7c74247..d23d210f 100644
--- a/apps/web-ele/src/views/system/operatelog/data.ts
+++ b/apps/web-ele/src/views/system/operatelog/data.ts
@@ -18,7 +18,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleUserList,
-        fieldNames: {
+        props: {
           label: 'nickname',
           value: 'id',
         },
diff --git a/apps/web-ele/src/views/system/post/index.vue b/apps/web-ele/src/views/system/post/index.vue
index 16c24a83..ba3d5364 100644
--- a/apps/web-ele/src/views/system/post/index.vue
+++ b/apps/web-ele/src/views/system/post/index.vue
@@ -10,7 +10,7 @@ import { ref } from 'vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -52,32 +52,26 @@ function onEdit(row: SystemPostApi.Post) {
 
 /** 删除岗位 */
 async function onDelete(row: SystemPostApi.Post) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该岗位吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deletePost(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deletePost(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 批量删除岗位 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该岗位吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deletePostList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deletePostList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/system/role/index.vue b/apps/web-ele/src/views/system/role/index.vue
index bc4fb531..6efc6068 100644
--- a/apps/web-ele/src/views/system/role/index.vue
+++ b/apps/web-ele/src/views/system/role/index.vue
@@ -11,7 +11,7 @@ import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElButton, ElLoading, ElMessage } from 'element-plus';
+import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -66,32 +66,26 @@ function onCreate() {
 
 /** 删除角色 */
 async function onDelete(row: SystemRoleApi.Role) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该角色吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteRole(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteRole(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 批量删除角色 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该角色吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteRoleList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteRoleList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/system/sms/channel/index.vue b/apps/web-ele/src/views/system/sms/channel/index.vue
index 98e644f9..0ba7e318 100644
--- a/apps/web-ele/src/views/system/sms/channel/index.vue
+++ b/apps/web-ele/src/views/system/sms/channel/index.vue
@@ -10,7 +10,7 @@ import { ref } from 'vue';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -52,32 +52,26 @@ function onEdit(row: SystemSmsChannelApi.SmsChannel) {
 
 /** 删除短信渠道 */
 async function onDelete(row: SystemSmsChannelApi.SmsChannel) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.signature]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该短信渠道吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteSmsChannel(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.signature]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteSmsChannel(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.signature]));
+  onRefresh();
 }
 
 /** 批量删除短信渠道 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该短信渠道吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteSmsChannelList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteSmsChannelList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/system/sms/template/index.vue b/apps/web-ele/src/views/system/sms/template/index.vue
index 0b1ea4b6..4e8a1567 100644
--- a/apps/web-ele/src/views/system/sms/template/index.vue
+++ b/apps/web-ele/src/views/system/sms/template/index.vue
@@ -10,7 +10,7 @@ import { ref } from 'vue';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -63,32 +63,26 @@ function onSend(row: SystemSmsTemplateApi.SmsTemplate) {
 
 /** 删除短信模板 */
 async function onDelete(row: SystemSmsTemplateApi.SmsTemplate) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该短信模板吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteSmsTemplate(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteSmsTemplate(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 批量删除短信模板 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该短信模板吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteSmsTemplateList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteSmsTemplateList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/system/social/client/index.vue b/apps/web-ele/src/views/system/social/client/index.vue
index f761ba02..2e85a190 100644
--- a/apps/web-ele/src/views/system/social/client/index.vue
+++ b/apps/web-ele/src/views/system/social/client/index.vue
@@ -10,7 +10,7 @@ import { ref } from 'vue';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -45,32 +45,26 @@ function onEdit(row: SystemSocialClientApi.SocialClient) {
 
 /** 删除社交客户端 */
 async function onDelete(row: SystemSocialClientApi.SocialClient) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该社交客户端吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteSocialClient(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteSocialClient(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 批量删除社交客户端 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该社交客户端吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteSocialClientList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteSocialClientList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/system/tenant/index.vue b/apps/web-ele/src/views/system/tenant/index.vue
index b2c0aeff..35005c0e 100644
--- a/apps/web-ele/src/views/system/tenant/index.vue
+++ b/apps/web-ele/src/views/system/tenant/index.vue
@@ -11,7 +11,7 @@ import { onMounted, ref } from 'vue';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -64,34 +64,26 @@ function onEdit(row: SystemTenantApi.Tenant) {
 
 /** 删除租户 */
 async function onDelete(row: SystemTenantApi.Tenant) {
-  const loading = ElLoading.service({
-    lock: true,
-    text: $t('ui.actionMessage.deleting', [row.name]),
-    background: 'rgba(0, 0, 0, 0.7)',
+  await ElMessageBox.confirm('确定要删除该租户吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteTenant(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loading.close();
-  }
+  await deleteTenant(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 批量删除租户 */
 async function onDeleteBatch() {
-  const loading = ElLoading.service({
-    lock: true,
-    text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
+  await ElMessageBox.confirm('确定要删除该租户吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteTenantList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loading.close();
-  }
+  await deleteTenantList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/system/tenantPackage/index.vue b/apps/web-ele/src/views/system/tenantPackage/index.vue
index 2d4ed2ac..b4af443f 100644
--- a/apps/web-ele/src/views/system/tenantPackage/index.vue
+++ b/apps/web-ele/src/views/system/tenantPackage/index.vue
@@ -10,7 +10,7 @@ import { ref } from 'vue';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -45,36 +45,26 @@ function onEdit(row: SystemTenantPackageApi.TenantPackage) {
 
 /** 删除租户套餐 */
 async function onDelete(row: SystemTenantPackageApi.TenantPackage) {
-  const loadingInstance = ElMessage({
-    message: $t('ui.actionMessage.deleting', [row.name]),
-    type: 'info',
-    duration: 0,
+  await ElMessageBox.confirm('确定要删除该租户套餐吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteTenantPackage(row.id as number);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteTenantPackage(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 /** 批量删除租户套餐 */
 async function onDeleteBatch() {
-  const loadingInstance = ElMessage({
-    message: $t('ui.actionMessage.deleting'),
-    type: 'info',
-    duration: 0,
+  await ElMessageBox.confirm('确定要删除该租户套餐吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteTenantPackageList(checkedIds.value);
-    loadingInstance.close();
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteTenantPackageList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/system/user/index.vue b/apps/web-ele/src/views/system/user/index.vue
index e0a8b6f4..f74ae90d 100644
--- a/apps/web-ele/src/views/system/user/index.vue
+++ b/apps/web-ele/src/views/system/user/index.vue
@@ -8,7 +8,7 @@ import { ref } from 'vue';
 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -83,32 +83,26 @@ function onEdit(row: SystemUserApi.User) {
 
 /** 删除用户 */
 async function onDelete(row: SystemUserApi.User) {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.username]),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该用户吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteUser(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.username]));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteUser(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.username]));
+  onRefresh();
 }
 
 /** 批量删除用户 */
 async function onDeleteBatch() {
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    fullscreen: true,
+  await ElMessageBox.confirm('确定要删除该用户吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteUserList(checkedIds.value);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await deleteUserList(checkedIds.value);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  onRefresh();
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/packages/@core/base/shared/src/utils/date.ts b/packages/@core/base/shared/src/utils/date.ts
index b66654d0..8cc41b41 100644
--- a/packages/@core/base/shared/src/utils/date.ts
+++ b/packages/@core/base/shared/src/utils/date.ts
@@ -26,6 +26,15 @@ export function formatDateTime(time: Date | number | string | undefined) {
   return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
 }
 
+export function formatDate2(date: Date, format?: string): string {
+  // 日期不存在，则返回空
+  if (!date) {
+    return '';
+  }
+  // 日期存在，则进行格式化
+  return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : '';
+}
+
 export function isDate(value: any): value is Date {
   return value instanceof Date;
 }
diff --git a/packages/@core/base/shared/src/utils/index.ts b/packages/@core/base/shared/src/utils/index.ts
index 7a22c972..0323d031 100644
--- a/packages/@core/base/shared/src/utils/index.ts
+++ b/packages/@core/base/shared/src/utils/index.ts
@@ -22,3 +22,18 @@ export { default as cloneDeep } from 'lodash.clonedeep';
 export { default as get } from 'lodash.get';
 export { default as isEqual } from 'lodash.isequal';
 export { default as set } from 'lodash.set';
+
+/**
+ * 构建排序字段
+ * @param prop 字段名称
+ * @param order 顺序
+ */
+export const buildSortingField = ({
+  prop,
+  order,
+}: {
+  order: 'ascending' | 'descending';
+  prop: string;
+}) => {
+  return { field: prop, order: order === 'ascending' ? 'asc' : 'desc' };
+};