diff --git a/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts b/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
index ba83c9ccc..b43034af6 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
+++ b/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
@@ -139,7 +139,6 @@ export function useAfterSaleInfoSchema(): DescriptionItemSchema[] {
               src: url,
               width: 60,
               height: 60,
-              class: 'object-cover',
             }),
           ),
         );
diff --git a/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue b/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
index 7a5a204ee..64da0f235 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
+++ b/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
@@ -238,7 +238,7 @@ onMounted(() => {
             type: 'primary',
             danger: true,
             onClick: handleDisagree,
-            // ifShow: afterSale.status === 10,
+            ifShow: afterSale.status === 10,
           },
           {
             label: '确认收货',
@@ -282,7 +282,7 @@ onMounted(() => {
     <div class="mb-4">
       <ProductGrid table-title="商品信息">
         <template #spuName="{ row }">
-          <div class="flex flex-1 flex-col items-start gap-1 gap-2 text-left">
+          <div class="flex flex-1 flex-col items-start gap-1 text-left">
             <span class="text-sm">{{ row.spuName }}</span>
             <div class="flex flex-wrap gap-1">
               <Tag
diff --git a/apps/web-antd/src/views/mall/trade/afterSale/index.vue b/apps/web-antd/src/views/mall/trade/afterSale/index.vue
index f1684a49c..e0e63eb76 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/index.vue
+++ b/apps/web-antd/src/views/mall/trade/afterSale/index.vue
@@ -119,6 +119,7 @@ onMounted(() => {
       <template #productInfo="{ row }">
         <div class="flex items-start gap-2 text-left">
           <Image
+            v-if="row.picUrl"
             :src="row.picUrl"
             :width="40"
             :height="40"
diff --git a/apps/web-ele/src/api/mall/trade/afterSale/index.ts b/apps/web-ele/src/api/mall/trade/afterSale/index.ts
index 2aed74c24..74c684857 100644
--- a/apps/web-ele/src/api/mall/trade/afterSale/index.ts
+++ b/apps/web-ele/src/api/mall/trade/afterSale/index.ts
@@ -77,21 +77,9 @@ export namespace MallAfterSaleApi {
     receiveTime?: Date;
     /** 收货备注 */
     receiveReason?: string;
-    /** 订单 */
-    order?: MallOrderApi.Order;
-    /** 订单操作日志 */
-    logs?: MallOrderApi.OrderLog[];
-    /** 订单项 */
-    orderItem?: MallOrderApi.OrderItem;
-    /** 用户信息 */
-    user?: {
-      /** 用户头像 */
-      avatar?: string;
-      /** 用户编号 */
-      id?: null | number;
-      /** 用户昵称 */
-      nickname?: string;
-    };
+    order?: MallOrderApi.Order; // 关联订单
+    orderItem?: MallOrderApi.OrderItem; // 关联订单项
+    logs?: any[]; // 关联售后日志
   }
 
   /** 拒绝售后请求 */
@@ -119,26 +107,26 @@ export function getAfterSale(id: number) {
 }
 
 /** 同意售后 */
-export function agree(id: number) {
+export function agreeAfterSale(id: number) {
   return requestClient.put(`/trade/after-sale/agree?id=${id}`);
 }
 
 /** 拒绝售后 */
-export function disagree(data: MallAfterSaleApi.DisagreeRequest) {
+export function disagreeAfterSale(data: MallAfterSaleApi.DisagreeRequest) {
   return requestClient.put('/trade/after-sale/disagree', data);
 }
 
 /** 确认收货 */
-export function receive(id: number) {
+export function receiveAfterSale(id: number) {
   return requestClient.put(`/trade/after-sale/receive?id=${id}`);
 }
 
 /** 拒绝收货 */
-export function refuse(id: number) {
+export function refuseAfterSale(id: number) {
   return requestClient.put(`/trade/after-sale/refuse?id=${id}`);
 }
 
 /** 确认退款 */
-export function refund(id: number) {
+export function refundAfterSale(id: number) {
   return requestClient.put(`/trade/after-sale/refund?id=${id}`);
 }
diff --git a/apps/web-ele/src/router/routes/modules/mall.ts b/apps/web-ele/src/router/routes/modules/mall.ts
index a0fdbddec..e17ef4c8c 100644
--- a/apps/web-ele/src/router/routes/modules/mall.ts
+++ b/apps/web-ele/src/router/routes/modules/mall.ts
@@ -76,7 +76,7 @@ const routes: RouteRecordRaw[] = [
           activePath: '/mall/trade/after-sale',
         },
         component: () =>
-          import('#/views/mall/trade/afterSale/modules/detail.vue'),
+          import('#/views/mall/trade/afterSale/detail/index.vue'),
       },
     ],
   },
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/data.ts b/apps/web-ele/src/views/mall/trade/afterSale/data.ts
index ee16eec86..2f3caa5b5 100644
--- a/apps/web-ele/src/views/mall/trade/afterSale/data.ts
+++ b/apps/web-ele/src/views/mall/trade/afterSale/data.ts
@@ -4,8 +4,33 @@ import type { VxeGridPropTypes } from '#/adapter/vxe-table';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { z } from '#/adapter/form';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 拒绝售后表单的 schema 配置 */
+export function useDisagreeFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'reason',
+      label: '拒绝原因',
+      componentProps: {
+        placeholder: '请输入拒绝原因',
+        rows: 4,
+      },
+      rules: z.string().min(2, { message: '拒绝原因不能少于 2 个字符' }),
+    },
+  ];
+}
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -13,16 +38,25 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'spuName',
       label: '商品名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入商品名称',
+      },
     },
     {
       fieldName: 'no',
       label: '退款编号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入退款编号',
+      },
     },
     {
       fieldName: 'orderNo',
       label: '订单编号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入订单编号',
+      },
     },
     {
       fieldName: 'status',
@@ -30,14 +64,18 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS, 'number'),
+        placeholder: '请选择售后状态',
+        clearable: true,
       },
     },
     {
-      fieldName: 'status',
+      fieldName: 'way',
       label: '售后方式',
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_WAY, 'number'),
+        placeholder: '请选择售后方式',
+        clearable: true,
       },
     },
     {
@@ -46,6 +84,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_TYPE, 'number'),
+        placeholder: '请选择售后类型',
+        clearable: true,
       },
     },
     {
@@ -67,55 +107,44 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       field: 'no',
       title: '退款编号',
       fixed: 'left',
+      minWidth: 200,
     },
     {
       field: 'orderNo',
       title: '订单编号',
       fixed: 'left',
+      minWidth: 200,
       slots: { default: 'orderNo' },
     },
     {
-      field: 'spuName',
-      title: '商品名称',
-      align: 'left',
-      minWidth: 200,
-    },
-    {
-      field: 'picUrl',
-      title: '商品图片',
-      cellRender: {
-        name: 'CellImage',
-      },
-    },
-    {
-      field: 'properties',
-      title: '商品属性',
-      minWidth: 200,
-      formatter: ({ cellValue }) => {
-        return cellValue && cellValue.length > 0
-          ? cellValue
-              .map((item: any) => `${item.propertyName} : ${item.valueName}`)
-              .join('\n')
-          : '-';
-      },
+      field: 'productInfo',
+      title: '商品信息',
+      minWidth: 600,
+      slots: { default: 'productInfo' },
     },
     {
       field: 'refundPrice',
       title: '订单金额',
-      formatter: 'formatFenToYuanAmount',
+      width: 120,
+      formatter: 'formatAmount2',
     },
     {
       field: 'user.nickname',
       title: '买家',
+      align: 'center',
+      minWidth: 120,
     },
     {
       field: 'createTime',
       title: '申请时间',
+      width: 180,
       formatter: 'formatDateTime',
     },
     {
-      field: 'content',
+      field: 'status',
       title: '售后状态',
+      width: 100,
+      align: 'center',
       cellRender: {
         name: 'CellDictTag',
         props: {
@@ -126,6 +155,8 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     {
       field: 'way',
       title: '售后方式',
+      width: 100,
+      align: 'center',
       cellRender: {
         name: 'CellDictTag',
         props: {
@@ -135,8 +166,9 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     },
     {
       title: '操作',
-      width: 80,
+      width: 160,
       fixed: 'right',
+      align: 'center',
       slots: { default: 'actions' },
     },
   ];
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/detail/data.ts b/apps/web-ele/src/views/mall/trade/afterSale/detail/data.ts
new file mode 100644
index 000000000..9cdc2ec37
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/afterSale/detail/data.ts
@@ -0,0 +1,224 @@
+import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { fenToYuan, formatDate } from '@vben/utils';
+
+import { ElImage } from 'element-plus';
+
+import { DictTag } from '#/components/dict-tag';
+
+/** 订单信息 schema */
+export function useOrderInfoSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'orderNo',
+      label: '订单号',
+    },
+    {
+      field: 'order.deliveryType',
+      label: '配送方式',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        h(DictTag, {
+          type: DICT_TYPE.TRADE_DELIVERY_TYPE,
+          value: data?.order?.deliveryType,
+        }),
+    },
+    {
+      field: 'order.type',
+      label: '订单类型',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        h(DictTag, {
+          type: DICT_TYPE.TRADE_ORDER_TYPE,
+          value: data?.order?.type,
+        }),
+    },
+    {
+      field: 'order.receiverName',
+      label: '收货人',
+    },
+    {
+      field: 'order.userRemark',
+      label: '买家留言',
+    },
+    {
+      field: 'order.terminal',
+      label: '订单来源',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        h(DictTag, {
+          type: DICT_TYPE.TERMINAL,
+          value: data?.order?.terminal,
+        }),
+    },
+    {
+      field: 'order.receiverMobile',
+      label: '联系电话',
+    },
+    {
+      field: 'order.remark',
+      label: '商家备注',
+    },
+    {
+      field: 'order.payOrderId',
+      label: '支付单号',
+    },
+    {
+      field: 'order.payChannelCode',
+      label: '付款方式',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_CHANNEL_CODE,
+          value: data?.order?.payChannelCode,
+        }),
+    },
+    {
+      field: 'user.nickname',
+      label: '买家',
+    },
+  ];
+}
+
+/** 售后信息 schema */
+export function useAfterSaleInfoSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '退款编号',
+    },
+    {
+      field: 'auditTime',
+      label: '申请时间',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        formatDate(data?.auditTime) as string,
+    },
+    {
+      field: 'type',
+      label: '售后类型',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        h(DictTag, {
+          type: DICT_TYPE.TRADE_AFTER_SALE_TYPE,
+          value: data?.type,
+        }),
+    },
+    {
+      field: 'way',
+      label: '售后方式',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        h(DictTag, {
+          type: DICT_TYPE.TRADE_AFTER_SALE_WAY,
+          value: data?.way,
+        }),
+    },
+    {
+      field: 'refundPrice',
+      label: '退款金额',
+      content: (data: MallAfterSaleApi.AfterSale) =>
+        fenToYuan(data?.refundPrice ?? 0),
+    },
+    {
+      field: 'applyReason',
+      label: '退款原因',
+    },
+    {
+      field: 'applyDescription',
+      label: '补充描述',
+    },
+    {
+      field: 'applyPicUrls',
+      label: '凭证图片',
+      content: (data) => {
+        const images = data?.applyPicUrls || [];
+        return h(
+          'div',
+          { class: 'flex gap-10px' },
+          images.map((url: string, index: number) =>
+            h(ElImage, {
+              key: index,
+              src: url,
+              width: 60,
+              height: 60,
+            }),
+          ),
+        );
+      },
+    },
+  ];
+}
+
+/** 退款状态 schema */
+export function useRefundStatusSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'status',
+      label: '退款状态',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
+          value: data?.status,
+        }),
+    },
+    {
+      field: 'reminder',
+      label: '提醒',
+      content: () =>
+        h('div', { class: 'text-red-500 mb-10px' }, [
+          h('div', '如果未发货，请点击同意退款给买家。'),
+          h('div', '如果实际已发货，请主动与买家联系。'),
+          h('div', '如果订单整体退款后，优惠券和余额会退还给买家.'),
+        ]),
+    },
+  ];
+}
+
+/** 商品信息 columns */
+export function useProductColumns() {
+  return [
+    {
+      field: 'spuName',
+      title: '商品信息',
+      minWidth: 300,
+      slots: { default: 'spuName' },
+    },
+    {
+      field: 'price',
+      title: '商品原价',
+      minWidth: 150,
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 100,
+    },
+    {
+      field: 'payPrice',
+      title: '合计',
+      minWidth: 150,
+      formatter: 'formatFenToYuanAmount',
+    },
+  ];
+}
+
+/** 操作日志 columns */
+export function useOperateLogSchema() {
+  return [
+    {
+      field: 'createTime',
+      title: '操作时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'userType',
+      title: '操作人',
+      width: 100,
+      slots: { default: 'userType' },
+    },
+    {
+      field: 'content',
+      title: '操作内容',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue b/apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue
new file mode 100644
index 000000000..6d26f76c8
--- /dev/null
+++ b/apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue
@@ -0,0 +1,316 @@
+<script setup lang="ts">
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+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 { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { useTabs } from '@vben/hooks';
+import { $t } from '@vben/locales';
+
+import { ElCard, ElLoading, ElMessage, ElTag } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  agreeAfterSale,
+  getAfterSale,
+  receiveAfterSale,
+  refundAfterSale,
+  refuseAfterSale,
+} from '#/api/mall/trade/afterSale';
+import { useDescription } from '#/components/description';
+import { DictTag } from '#/components/dict-tag';
+import { TableAction } from '#/components/table-action';
+
+import DisagreeForm from '../modules/disagree-form.vue';
+import {
+  useAfterSaleInfoSchema,
+  useOperateLogSchema,
+  useOrderInfoSchema,
+  useProductColumns,
+  useRefundStatusSchema,
+} from './data';
+
+defineOptions({ name: 'TradeAfterSaleDetail' });
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const loading = ref(false);
+const afterSaleId = ref(0);
+const afterSale = ref<MallAfterSaleApi.AfterSale>({
+  order: {},
+  orderItem: {},
+  logs: [],
+});
+
+const [OrderDescriptions] = useDescription({
+  componentProps: {
+    title: '订单信息',
+    border: false,
+    column: 3,
+    direction: 'horizontal',
+    labelWidth: 140,
+    extra: '',
+  },
+  schema: useOrderInfoSchema(),
+});
+
+const [AfterSaleDescriptions] = useDescription({
+  componentProps: {
+    title: '售后信息',
+    border: false,
+    column: 3,
+    direction: 'horizontal',
+    labelWidth: 140,
+    extra: '',
+  },
+  schema: useAfterSaleInfoSchema(),
+});
+
+const [RefundStatusDescriptions] = useDescription({
+  componentProps: {
+    title: '退款状态',
+    border: false,
+    column: 1,
+    direction: 'horizontal',
+    labelWidth: 140,
+    extra: '',
+  },
+  schema: useRefundStatusSchema(),
+});
+
+const [ProductGrid, productGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    cellConfig: {
+      height: 60,
+    },
+    columns: useProductColumns(),
+    data: [],
+    height: 'auto',
+    border: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallOrderApi.OrderItem>,
+});
+
+const [OperateLogGrid, operateLogGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useOperateLogSchema(),
+    data: [],
+    border: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions,
+});
+
+const [DisagreeModal, disagreeModalApi] = useVbenModal({
+  connectedComponent: DisagreeForm,
+  destroyOnClose: true,
+});
+
+/** 获得详情 */
+async function getDetail() {
+  loading.value = true;
+  try {
+    const res = await getAfterSale(afterSaleId.value);
+    if (res === null) {
+      ElMessage.error('售后订单不存在');
+      handleBack();
+      return;
+    }
+    afterSale.value = res;
+    productGridApi.setGridOptions({ data: [afterSale.value.orderItem] });
+    operateLogGridApi.setGridOptions({
+      data: afterSale.value.logs || [],
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 同意售后 */
+async function handleAgree() {
+  await confirm('是否同意售后？');
+  const loadingInstance = ElLoading.service({
+    text: '正在处理中...',
+  });
+  try {
+    await agreeAfterSale(afterSale.value.id!);
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    await getDetail();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 拒绝售后 */
+function handleDisagree() {
+  disagreeModalApi.setData({ afterSale: afterSale.value }).open();
+}
+
+/** 确认收货 */
+async function handleReceive() {
+  await confirm('是否确认收货？');
+  const loadingInstance = ElLoading.service({
+    text: '正在处理中...',
+  });
+  try {
+    await receiveAfterSale(afterSale.value.id!);
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    await getDetail();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 拒绝收货 */
+async function handleRefuse() {
+  await confirm('是否拒绝收货？');
+  const loadingInstance = ElLoading.service({
+    text: '正在处理中...',
+  });
+  try {
+    await refuseAfterSale(afterSale.value.id!);
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    await getDetail();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 确认退款 */
+async function handleRefund() {
+  await confirm('是否确认退款？');
+  const loadingInstance = ElLoading.service({
+    text: '正在处理中...',
+  });
+  try {
+    await refundAfterSale(afterSale.value.id!);
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    await getDetail();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/mall/trade/afterSale');
+}
+
+/** 初始化 */
+onMounted(() => {
+  afterSaleId.value = Number(route.params.id);
+  getDetail();
+});
+</script>
+
+<template>
+  <Page auto-content-height :title="afterSale.no" :loading="loading">
+    <template #extra>
+      <TableAction
+        :actions="[
+          {
+            label: '返回',
+            type: 'default',
+            icon: 'lucide:arrow-left',
+            onClick: handleBack,
+          },
+          {
+            label: '同意售后',
+            type: 'primary',
+            onClick: handleAgree,
+            ifShow: afterSale.status === 10,
+          },
+          {
+            label: '拒绝售后',
+            type: 'danger',
+            link: true,
+            onClick: handleDisagree,
+            ifShow: afterSale.status === 10,
+          },
+          {
+            label: '确认收货',
+            type: 'primary',
+            onClick: handleReceive,
+            ifShow: afterSale.status === 30,
+          },
+          {
+            label: '拒绝收货',
+            type: 'danger',
+            link: true,
+            onClick: handleRefuse,
+            ifShow: afterSale.status === 30,
+          },
+          {
+            label: '确认退款',
+            type: 'primary',
+            onClick: handleRefund,
+            ifShow: afterSale.status === 40,
+          },
+        ]"
+      />
+    </template>
+
+    <!-- 拒绝售后弹窗 -->
+    <DisagreeModal @success="getDetail" />
+
+    <!-- 订单信息 -->
+    <ElCard class="mb-4">
+      <OrderDescriptions :data="afterSale" />
+    </ElCard>
+    <!-- 售后信息 -->
+    <ElCard class="mb-4">
+      <AfterSaleDescriptions :data="afterSale" />
+    </ElCard>
+    <!-- 退款状态 -->
+    <ElCard class="mb-4">
+      <RefundStatusDescriptions :data="afterSale" />
+    </ElCard>
+    <!-- 商品信息 -->
+    <div class="mb-4">
+      <ProductGrid table-title="商品信息">
+        <template #spuName="{ row }">
+          <div class="flex flex-1 flex-col items-start gap-1 text-left">
+            <span class="text-sm">{{ row.spuName }}</span>
+            <div class="flex flex-wrap gap-1">
+              <ElTag
+                v-for="property in row.properties"
+                :key="property.propertyId!"
+                size="small"
+                type="info"
+              >
+                {{ property.propertyName }}: {{ property.valueName }}
+              </ElTag>
+            </div>
+          </div>
+        </template>
+      </ProductGrid>
+    </div>
+    <!-- 操作日志 -->
+    <div>
+      <OperateLogGrid table-title="售后日志">
+        <template #userType="{ row }">
+          <ElTag v-if="row.userId === 0" type="info">系统</ElTag>
+          <DictTag v-else :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
+        </template>
+      </OperateLogGrid>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/index.vue b/apps/web-ele/src/views/mall/trade/afterSale/index.vue
index 40b1f9b47..48f3158a9 100644
--- a/apps/web-ele/src/views/mall/trade/afterSale/index.vue
+++ b/apps/web-ele/src/views/mall/trade/afterSale/index.vue
@@ -9,7 +9,7 @@ import { DocAlert, Page } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import { ElButton, ElTabs } from 'element-plus';
+import { ElButton, ElImage, ElTabs, ElTag } from 'element-plus';
 
 import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getAfterSalePage } from '#/api/mall/trade/afterSale';
@@ -18,23 +18,28 @@ import { useGridColumns, useGridFormSchema } from './data';
 
 const { push } = useRouter();
 
-const status = ref('0');
 const statusTabs = ref([
   {
     label: '全部',
     value: '0',
   },
 ]);
+const statusTab = ref(statusTabs.value[0]!.value);
 
 /** 处理退款 */
-function openAfterSaleDetail(row: MallAfterSaleApi.AfterSale) {
+function handleOpenAfterSaleDetail(row: MallAfterSaleApi.AfterSale) {
   push({ name: 'TradeAfterSaleDetail', params: { id: row.id } });
 }
 
-// TODO @xingyu：缺详情页
 /** 查看订单详情 */
-function openOrderDetail(row: MallAfterSaleApi.AfterSale) {
-  push({ name: 'TradeOrderDetail', params: { id: row.id } });
+function handleOpenOrderDetail(row: MallAfterSaleApi.AfterSale) {
+  push({ name: 'TradeOrderDetail', params: { id: row.orderId } });
+}
+
+/** 切换售后状态 */
+function handleChangeStatus(key: number | string) {
+  statusTab.value = key.toString();
+  gridApi.query();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -42,6 +47,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
+    cellConfig: {
+      height: 60,
+    },
     columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
@@ -51,7 +59,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getAfterSalePage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            status: status.value === '0' ? undefined : status.value,
+            status:
+              statusTab.value === '0' ? undefined : Number(statusTab.value),
             ...formValues,
           });
         },
@@ -59,6 +68,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -67,10 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<MallAfterSaleApi.AfterSale>,
 });
 
-function onChangeStatus(key: number | string) {
-  status.value = key.toString();
-  gridApi.query();
-}
+/** 初始化 */
 onMounted(() => {
   for (const dict of getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
     statusTabs.value.push({
@@ -85,25 +92,50 @@ onMounted(() => {
   <Page auto-content-height>
     <template #doc>
       <DocAlert
-        title="【交易】交易订单"
-        url="https://doc.iocoder.cn/mall/trade-order/"
+        title="【交易】售后退款"
+        url="https://doc.iocoder.cn/mall/trade-aftersale/"
       />
     </template>
-    <Grid table-title="退款列表">
+
+    <Grid>
       <template #top>
-        <ElTabs class="border-none" @change="onChangeStatus">
+        <ElTabs v-model="statusTab" class="-mt-11" @tab-change="handleChangeStatus">
           <ElTabs.TabPane
             v-for="tab in statusTabs"
             :key="tab.value"
-            :tab="tab.label"
+            :label="tab.label"
+            :name="tab.value"
           />
         </ElTabs>
       </template>
       <template #orderNo="{ row }">
-        <ElButton type="primary" link @click="openOrderDetail(row)">
+        <ElButton type="primary" link @click="handleOpenOrderDetail(row)">
           {{ row.orderNo }}
         </ElButton>
       </template>
+      <template #productInfo="{ row }">
+        <div class="flex items-start gap-2 text-left">
+          <ElImage
+            v-if="row.picUrl"
+            :src="row.picUrl"
+            style="width: 40px; height: 40px"
+            :preview-src-list="[row.picUrl]"
+          />
+          <div class="flex flex-1 flex-col gap-1">
+            <span class="text-sm">{{ row.spuName }}</span>
+            <div class="mt-1 flex flex-wrap gap-1">
+              <ElTag
+                v-for="property in row.properties"
+                :key="property.propertyId!"
+                size="small"
+                type="info"
+              >
+                {{ property.propertyName }}: {{ property.valueName }}
+              </ElTag>
+            </div>
+          </div>
+        </div>
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -111,7 +143,7 @@ onMounted(() => {
               label: '处理退款',
               type: 'primary',
               link: true,
-              onClick: openAfterSaleDetail.bind(null, row),
+              onClick: handleOpenAfterSaleDetail.bind(null, row),
             },
           ]"
         />
@@ -119,3 +151,8 @@ onMounted(() => {
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue b/apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue
deleted file mode 100644
index 292a09147..000000000
--- a/apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue
+++ /dev/null
@@ -1,433 +0,0 @@
-<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 { confirm, ContentWrap, Page } from '@vben/common-ui';
-import { DICT_TYPE } from '@vben/constants';
-import { getDictLabel, getDictObj } from '@vben/hooks';
-import { $t } from '@vben/locales';
-import { fenToYuan, formatDate } from '@vben/utils';
-
-import {
-  ElDescriptions,
-  ElDescriptionsItem,
-  ElImage,
-  ElMessage,
-  ElTimeline,
-  ElTimelineItem,
-} from 'element-plus';
-
-import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
-import { DictTag } from '#/components/dict-tag';
-
-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 confirm('是否同意售后？');
-  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 confirm('是否确认收货？');
-  await AfterSaleApi.receive(formData.value.id!);
-  // 提示成功
-  ElMessage.success($t('page.common.success'));
-  await getDetail();
-};
-
-/** 拒绝收货 */
-const refuse = async () => {
-  // 二次确认
-  await confirm('是否拒绝收货？');
-  await AfterSaleApi.refuse(formData.value.id!);
-  // 提示成功
-  ElMessage.success($t('page.common.success'));
-  await getDetail();
-};
-
-/** 确认退款 */
-const refund = async () => {
-  // 二次确认
-  await confirm('是否确认退款？');
-  await AfterSaleApi.refund(formData.value.id!);
-  // 提示成功
-  ElMessage.success($t('page.common.success'));
-  await getDetail();
-};
-
-/** 关闭 tag */
-const close = () => {
-  push({ name: 'TradeAfterSale' });
-};
-onMounted(async () => {
-  await getDetail();
-});
-</script>
-<template>
-  <Page auto-content-height>
-    <ContentWrap>
-      <!-- 订单信息 -->
-      <ElDescriptions title="订单信息">
-        <ElDescriptionsItem label="订单号: ">
-          {{ formData.orderNo }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="配送方式: ">
-          <DictTag
-            :type="DICT_TYPE.TRADE_DELIVERY_TYPE"
-            :value="formData.order?.deliveryType"
-          />
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="订单类型: ">
-          <DictTag
-            :type="DICT_TYPE.TRADE_ORDER_TYPE"
-            :value="formData.order?.type"
-          />
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="收货人: ">
-          {{ formData.order?.receiverName }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="买家留言: ">
-          {{ formData.order?.userRemark }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="订单来源: ">
-          <DictTag
-            :type="DICT_TYPE.TERMINAL"
-            :value="formData.order?.terminal"
-          />
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="联系电话: ">
-          {{ formData.order?.receiverMobile }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="商家备注: ">
-          {{ formData.order?.remark }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="支付单号: ">
-          {{ formData.order?.payOrderId }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="付款方式: ">
-          <DictTag
-            :type="DICT_TYPE.PAY_CHANNEL_CODE"
-            :value="formData.order?.payChannelCode"
-          />
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="买家: ">
-          {{ formData?.user?.nickname }}
-        </ElDescriptionsItem>
-      </ElDescriptions>
-
-      <!-- 售后信息 -->
-      <ElDescriptions title="售后信息">
-        <ElDescriptionsItem label="退款编号: ">
-          {{ formData.no }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="申请时间: ">
-          {{ formatDate(formData.auditTime) }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="售后类型: ">
-          <DictTag
-            :type="DICT_TYPE.TRADE_AFTER_SALE_TYPE"
-            :value="formData.type"
-          />
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="售后方式: ">
-          <DictTag
-            :type="DICT_TYPE.TRADE_AFTER_SALE_WAY"
-            :value="formData.way"
-          />
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="退款金额: ">
-          {{ fenToYuan(formData.refundPrice ?? 0) }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="退款原因: ">
-          {{ formData.applyReason }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="补充描述: ">
-          {{ formData.applyDescription }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="凭证图片: ">
-          <ElImage
-            v-for="(item, index) in formData.applyPicUrls"
-            :key="index"
-            :src="item"
-            style="width: 60px; height: 60px; margin-right: 10px"
-            :preview-src-list="formData.applyPicUrls ?? []"
-          />
-        </ElDescriptionsItem>
-      </ElDescriptions>
-
-      <!-- 退款状态 -->
-      <ElDescriptions :column="1" title="退款状态">
-        <ElDescriptionsItem label="退款状态: ">
-          <DictTag
-            :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS"
-            :value="formData.status"
-          />
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label-class-name="no-colon">
-          <el-button
-            v-if="formData.status === 10"
-            type="primary"
-            @click="agree"
-          >
-            同意售后
-          </el-button>
-          <el-button
-            v-if="formData.status === 10"
-            type="primary"
-            @click="disagree"
-          >
-            拒绝售后
-          </el-button>
-          <el-button
-            v-if="formData.status === 30"
-            type="primary"
-            @click="receive"
-          >
-            确认收货
-          </el-button>
-          <el-button
-            v-if="formData.status === 30"
-            type="primary"
-            @click="refuse"
-          >
-            拒绝收货
-          </el-button>
-          <el-button
-            v-if="formData.status === 40"
-            type="primary"
-            @click="refund"
-          >
-            确认退款
-          </el-button>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem>
-          <template #label><span style="color: red">提醒: </span></template>
-          如果未发货，请点击同意退款给买家。<br />
-          如果实际已发货，请主动与买家联系。<br />
-          如果订单整体退款后，优惠券和余额会退还给买家.
-        </ElDescriptionsItem>
-      </ElDescriptions>
-
-      <!-- 商品信息 -->
-      <ElDescriptions title="商品信息">
-        <ElDescriptionsItem label-class-name="no-colon">
-          <el-row :gutter="20">
-            <el-col :span="15">
-              <el-table
-                v-if="formData.orderItem"
-                :data="[formData.orderItem]"
-                border
-              >
-                <el-table-column label="商品" prop="spuName" width="auto">
-                  <template #default="{ row }">
-                    {{ row.spuName }}
-                    <el-tag
-                      v-for="property in row.properties"
-                      :key="property.propertyId"
-                      class="mr-10px"
-                    >
-                      {{ property.propertyName }}: {{ property.valueName }}
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column label="商品原价" prop="price" width="150">
-                  <template #default="{ row }">
-                    {{ fenToYuan(row.price) }} 元
-                  </template>
-                </el-table-column>
-                <el-table-column label="数量" prop="count" width="100" />
-                <el-table-column label="合计" prop="payPrice" width="150">
-                  <template #default="{ row }">
-                    {{ fenToYuan(row.payPrice) }} 元
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-col>
-            <el-col :span="10" />
-          </el-row>
-        </ElDescriptionsItem>
-      </ElDescriptions>
-
-      <!-- 操作日志 -->
-      <ElDescriptions title="售后日志">
-        <ElDescriptionsItem label-class-name="no-colon">
-          <ElTimeline>
-            <ElTimelineItem
-              v-for="saleLog in formData.logs"
-              :key="saleLog.id"
-              :timestamp="formatDate(saleLog.createTime)?.toString()"
-              placement="top"
-            >
-              <div class="el-timeline-right-content">
-                <span>{{ saleLog.content }}</span>
-              </div>
-              <template #dot>
-                <span
-                  :style="{
-                    backgroundColor: getUserTypeColor(saleLog.userType ?? 0),
-                  }"
-                  class="dot-node-style"
-                >
-                  {{
-                    getDictLabel(DICT_TYPE.USER_TYPE, saleLog.userType)[0] ||
-                    '系'
-                  }}
-                </span>
-              </template>
-            </ElTimelineItem>
-          </ElTimeline>
-        </ElDescriptionsItem>
-      </ElDescriptions>
-    </ContentWrap>
-
-    <!-- 各种操作的弹窗 -->
-    <UpdateAuditReasonForm
-      ref="updateAuditReasonFormRef"
-      @success="getDetail"
-    />
-  </Page>
-</template>
-<style lang="scss" scoped>
-:deep(.el-descriptions) {
-  &:not(:nth-child(1)) {
-    margin-top: 20px;
-  }
-
-  .el-descriptions__title {
-    display: flex;
-    align-items: center;
-
-    &::before {
-      display: inline-block;
-      width: 3px;
-      height: 20px;
-      margin-right: 10px;
-      content: '';
-      background-color: #409eff;
-    }
-  }
-
-  .el-descriptions-item__container {
-    margin: 0 10px;
-
-    .no-colon {
-      margin: 0;
-
-      &::after {
-        content: '';
-      }
-    }
-  }
-}
-
-// 时间线样式调整
-:deep(.el-timeline) {
-  margin: 10px 0 0 160px;
-
-  .el-timeline-item__wrapper {
-    position: relative;
-    top: -20px;
-
-    .el-timeline-item__timestamp {
-      position: absolute !important;
-      top: 10px;
-      left: -150px;
-    }
-  }
-}
-
-/* 单独定义气泡样式，不使用嵌套 */
-:deep(.el-timeline-right-content) {
-  position: relative;
-  display: flex;
-  align-items: center;
-  min-height: 30px;
-  padding: 10px;
-  margin-left: 10px;
-  background-color: #f5f7fa; /* 使用明确的颜色替代变量 */
-  border-radius: 4px;
-}
-
-:deep(.el-timeline-right-content)::before {
-  position: absolute;
-  top: 10px;
-  left: -16px;
-  content: '';
-  border-color: transparent #f5f7fa transparent transparent;
-  border-style: solid;
-  border-width: 8px;
-}
-
-.dot-node-style {
-  position: absolute;
-  left: -5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  font-size: 10px;
-  color: #fff;
-  border-radius: 50%;
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/modules/disagree-form.vue b/apps/web-ele/src/views/mall/trade/afterSale/modules/disagree-form.vue
index 540816161..47f8a365a 100644
--- 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
@@ -1,20 +1,20 @@
-<script lang="ts" setup>
-import type { MallOrderApi } from '#/api/mall/trade/order';
+<script setup lang="ts">
+import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
 
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 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';
+import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
+
+import { useDisagreeFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-
-const formData = ref<MallOrderApi.DeliveryRequest>();
+const formData = ref<MallAfterSaleApi.AfterSale>();
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -22,56 +22,10 @@ const [Form, formApi] = useVbenForm({
       class: 'w-full',
     },
     formItemClass: 'col-span-2',
-    labelWidth: 120,
+    labelWidth: 80,
   },
   layout: 'horizontal',
-  schema: [
-    {
-      component: 'Input',
-      fieldName: 'id',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    // TODO @xingyu：发货默认选中第一个？
-    {
-      fieldName: 'expressType',
-      label: '发货方式',
-      component: 'RadioGroup',
-      componentProps: {
-        options: [
-          { label: '快递', value: 'express' },
-          { label: '无需发货', value: 'none' },
-        ],
-        buttonStyle: 'solid',
-        optionType: 'button',
-      },
-    },
-    {
-      fieldName: 'logisticsId',
-      label: '物流公司',
-      component: 'ApiSelect',
-      componentProps: {
-        api: getSimpleDeliveryExpressList,
-        labelField: 'name',
-        valueField: 'id',
-      },
-      dependencies: {
-        triggerFields: ['expressType'],
-        show: (values) => values.expressType === 'express',
-      },
-    },
-    {
-      fieldName: 'logisticsNo',
-      label: '物流单号',
-      component: 'Input',
-      dependencies: {
-        triggerFields: ['expressType'],
-        show: (values) => values.expressType === 'express',
-      },
-    },
-  ],
+  schema: useDisagreeFormSchema(),
   showDefaultActions: false,
 });
 
@@ -83,14 +37,10 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as MallOrderApi.DeliveryRequest;
-    if (data.expressType === 'none') {
-      // 无需发货的情况
-      data.logisticsId = 0;
-      data.logisticsNo = '';
-    }
     try {
-      await deliveryOrder(data);
+      const data =
+        (await formApi.getValues()) as MallAfterSaleApi.DisagreeRequest;
+      await AfterSaleApi.disagreeAfterSale(data);
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -105,16 +55,15 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<MallOrderApi.Order>();
-    if (!data) {
+    const data = modalApi.getData<{ afterSale: MallAfterSaleApi.AfterSale }>();
+    if (!data?.afterSale) {
       return;
     }
+    formData.value = data.afterSale;
     modalApi.lock();
     try {
-      if (data.logisticsId === 0) {
-        await formApi.setValues({ expressType: 'none' });
-      }
-      // 设置到 values
+      // 设置表单数据
+      await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
     }
@@ -123,7 +72,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-1/3" title="发货">
+  <Modal title="拒绝售后" class="w-1/3">
     <Form class="mx-4" />
   </Modal>
 </template>