feat: 更新组件和API，优化数据处理逻辑

- 将 TreeSelect 组件的 fieldNames 属性更改为 props - 更新商品分类API的请求路径 - 在多个模块中引入 ElMessageBox 以增强用户交互体验 - 新增售后管理和订单管理的详细视图组件 - 优化了多个表单组件的逻辑，提升了用户体验
2025-07-15 13:23:20 +08:00 · 2025-07-15 13:23:20 +08:00 · 6ce1363dea
parent 067df741b4
commit 6ce1363dea
69 changed files with 2314 additions and 969 deletions
--- a/apps/web-antd/src/adapter/component/index.ts
+++ b/apps/web-antd/src/adapter/component/index.ts
@ -163,7 +163,7 @@ async function initComponentAdapter() {
      'select',
      {
        component: TreeSelect,
-        fieldNames: { label: 'label', value: 'value', children: 'children' },
+        props: { label: 'label', value: 'value', children: 'children' },
        loadingSlot: 'suffixIcon',
        modelPropName: 'value',
        optionsPropName: 'treeData',
--- 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',
  );
 }
--- 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;
+    };
  }

  /** 拒绝售后请求 */
--- 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}`,
+  );
 }

 /** 订单发货 */
--- 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": "复制失败"
  }
 }
--- 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;
--- 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();
 }

 /** 生成代码 */
--- 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[]>([]);
--- 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[]>([]);
--- 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[]>([]);
--- 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[]>([]);
--- 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[]>([]);
--- 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({
--- 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();
 }

 /** 切换树形展开/收缩状态 */
--- 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();
 }

 /** 表格事件 */
--- 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({
--- 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,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
          const res = await getCategoryList({});
          return handleTree(res, 'id', 'parentId', 'children');
        },
-        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        props: { label: 'name', value: 'id', children: 'children' },
      },
    },
    {
--- 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();
 }

 /** 更新状态 */
--- 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
--- 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({
--- 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({
--- 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({
--- 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({
--- 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();
 }

 /** 刷新表格 */
--- 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({
--- 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();
 }

--- 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();
 }

--- 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();
 }
--- 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({
--- 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({
--- 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();
 }

 /** 修改状态 */
--- a/apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue
+++ 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="margin-right: 10px; height: 60px; width: 60px"
+            :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;
+      background-color: #409eff;
+      content: '';
+    }
+  }
+
+  .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) {
+  display: flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 10px;
+  background-color: #f5f7fa; /* 使用明确的颜色替代变量 */
+  border-radius: 4px;
+  position: relative;
+  margin-left: 10px;
+}
+
+:deep(.el-timeline-right-content)::before {
+  position: absolute;
+  top: 10px;
+  left: -16px;
+  content: '';
+  border-width: 8px;
+  border-style: solid;
+  border-color: transparent #f5f7fa transparent transparent;
+}
+
+.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>
--- 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
@ -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 { 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,
+        props: {
+          label: 'name',
+          value: '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>
--- 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();
 }

 /** 推广资格：开通/关闭 */
--- 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({
--- 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({
--- 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({
--- 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,7 +35,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      component: 'ApiSelect',
      componentProps: {
        api: getSimpleDeliveryPickUpStoreList,
-        fieldNames: {
+        props: {
          label: 'name',
          value: 'id',
        },
--- 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,7 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'ApiTreeSelect',
      componentProps: {
        api: () => getAreaTree(),
-        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        props: { label: 'name', value: 'id', children: 'children' },
      },
    },
    {
@ -130,7 +130,7 @@ export function useBindFormSchema(): VbenFormSchema[] {
      rules: 'required',
      componentProps: {
        api: () => getSimpleUserList(),
-        fieldNames: { label: 'nickname', value: 'id' },
+        props: { label: 'nickname', value: 'id' },
        mode: 'tags',
        allowClear: true,
      },
--- 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({
--- 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,7 +54,7 @@ const [Form, formApi] = useVbenForm({
      component: 'ApiSelect',
      componentProps: {
        api: getSimpleDeliveryExpressList,
-        fieldNames: {
+        props: {
          label: 'name',
          value: 'id',
        },
--- a/apps/web-ele/src/views/mall/trade/order/modules/detail.vue
+++ 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) {
+  display: flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 10px;
+  background-color: #f5f7fa; /* 使用明确的颜色替代变量 */
+  border-radius: 4px;
+  position: relative;
+  margin-left: 10px;
+}
+
+:deep(.el-timeline-right-content)::before {
+  position: absolute;
+  top: 10px;
+  left: -16px;
+  content: '';
+  border-width: 8px;
+  border-style: solid;
+  border-color: transparent #f5f7fa transparent transparent;
+}
+
+.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>
--- 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
@ -0,0 +1,133 @@
+<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(),
+        props: {
+          label: 'name',
+          value: 'id',
+          children: '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>
--- 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
@ -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>
--- 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
@ -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>
--- 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({
--- 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({
--- 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({
--- a/apps/web-ele/src/views/member/user/data.ts
+++ b/apps/web-ele/src/views/member/user/data.ts
@ -86,7 +86,7 @@ export function useFormSchema(): VbenFormSchema[] {
      label: '所在地',
      componentProps: {
        api: () => getAreaTree(),
-        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        props: { label: 'name', value: 'id', children: 'children' },
      },
    },
    {
@ -95,7 +95,7 @@ export function useFormSchema(): VbenFormSchema[] {
      label: '用户标签',
      componentProps: {
        api: () => getSimpleTagList(),
-        fieldNames: { label: 'name', value: 'id' },
+        props: { label: 'name', value: 'id' },
        mode: 'multiple',
      },
    },
@ -105,7 +105,7 @@ export function useFormSchema(): VbenFormSchema[] {
      label: '用户分组',
      componentProps: {
        api: () => getSimpleGroupList(),
-        fieldNames: { label: 'name', value: 'id' },
+        props: { label: 'name', value: 'id' },
      },
    },
    {
@ -151,7 +151,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      component: 'ApiSelect',
      componentProps: {
        api: () => getSimpleTagList(),
-        fieldNames: { label: 'name', value: 'id' },
+        props: { label: 'name', value: 'id' },
        mode: 'multiple',
      },
    },
@ -161,7 +161,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      component: 'ApiSelect',
      componentProps: {
        api: () => getSimpleLevelList(),
-        fieldNames: { label: 'name', value: 'id' },
+        props: { label: 'name', value: 'id' },
      },
    },
    {
@ -170,7 +170,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      component: 'ApiSelect',
      componentProps: {
        api: () => getSimpleGroupList(),
-        fieldNames: { label: 'name', value: 'id' },
+        props: { label: 'name', value: 'id' },
      },
    },
  ];
@ -290,7 +290,7 @@ export function useLeavelFormSchema(): VbenFormSchema[] {
      component: 'ApiSelect',
      componentProps: {
        api: () => getSimpleLevelList(),
-        fieldNames: { label: 'name', value: 'id' },
+        props: { label: 'name', value: 'id' },
      },
    },
    {
--- 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();
 }

 /** 更新状态 */
--- 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({
--- 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();
 }

 /** 表格操作按钮的回调函数 */
--- 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[]>([]);
--- 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[]>([]);
--- 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[]>([]);
--- 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[]>([]);
--- 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();
 }

 /** 表格操作按钮的回调函数 */
--- 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[]>([]);
--- 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[]>([]);
--- 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();
 }

 /** 表格操作按钮的回调函数 */
--- 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',
        },
--- 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[]>([]);
--- 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[]>([]);
--- 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[]>([]);
--- 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[]>([]);
--- 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[]>([]);
--- 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[]>([]);
--- 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[]>([]);
--- 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[]>([]);