feat: new page

config/proxy.ts

@@ -16,7 +16,7 @@ export default {
     '/admin-api/': {
       // http://192.168.1.231:48080  伟强
       // https://petshy.tashowz.com/
-      target: 'https://petshy.tashowz.com',
+      target: 'https://petshy.tashowz.com/ ',
       changeOrigin: true,
     },
   },

config/routes.ts

@@ -46,17 +46,18 @@ export default [
   //   ],
 
   // },
-  {
+  // {
-    path: '/ai1',
+  //   path: "/ai1",
-    name: 'AI1',
+  //   name: "AI1",
-    routes: [
+  //   // redirect: "tag",
-      {
+  //   routes: [
-        name: 'ai样本',
+  //     {
-        path: '/ai1/tag',
+  //       name: "ai样本",
-        component: './ai/sample-tag',
+  //       path: "tag",
-      },
+  //       component: "./prod/list/components/service-rule/index",
-    ],
+  //     },
-  },
+  //   ],
+  // },
   // {
   //   path: "/system",
   //   name: "系统管理",

src/components/EditableProTable/index.tsx

@@ -0,0 +1,60 @@
+import {
+  ActionType,
+  EditableFormInstance,
+  EditableProTable,
+  type EditableProTableProps,
+  type ParamsType,
+  ProColumns,
+} from '@ant-design/pro-components';
+import { Form, Table } from 'antd';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+
+interface EditableProTableComProps<
+  T extends Record<string, any>,
+  U extends ParamsType = ParamsType,
+> extends Omit<
+    EditableProTableProps<T, U>,
+    'editableFormRef' | 'recordCreatorProps'
+  > {
+  editableFormRef?: React.Ref<any>;
+  recordCreatorProps?: any;
+}
+
+const EditableProTableCom = forwardRef(
+  <T extends Record<string, any>>(
+    props: EditableProTableComProps<T>,
+    ref: React.Ref<any>,
+  ) => {
+    // 提取不应该直接传递给 EditableProTable 的属性
+    const { value, columns, ...restProps } = props;
+
+    return (
+      <EditableProTable
+        value={value}
+        columns={columns}
+        actionRef={ref}
+        recordCreatorProps={false}
+        {...restProps}
+      />
+    );
+  },
+);
+
+// const EditableProTableCom = <T extends Record<string, any>>(
+//   props: EditableProTableComProps<T>
+// ) => {
+//   // 提取不应该直接传递给 EditableProTable 的属性
+//   const { value, columns, ...restProps } = props;
+
+//   return (
+//     <EditableProTable
+//       value={value}
+//       columns={columns}
+//       recordCreatorProps={false}
+//       {...restProps}
+//     />
+//   );
+// };
+export default EditableProTableCom as <T extends Record<string, any>>(
+  props: EditableProTableComProps<T> & { ref?: React.Ref<any> },
+) => React.ReactElement;

src/components/ModalCom/CommonModal.tsx

@@ -0,0 +1,36 @@
+import { Modal, type ModalProps } from 'antd';
+import React from 'react';
+
+const CommonModal: React.FC<ModalProps> = (props) => {
+  const { children } = props;
+  return (
+    <Modal
+      {...props}
+      width={'70vw'}
+      styles={{
+        body: {
+          height: '65vh',
+          overflowY: 'auto',
+          padding: '0 16px',
+          minWidth: '100%',
+        },
+        content: {
+          background: '#f5f5f5',
+          padding: 0,
+        },
+        header: {
+          padding: '16px 24px',
+          marginBottom: 16,
+        },
+        footer: {
+          padding: '16px 24px',
+          background: '#ffff',
+        },
+      }}
+    >
+      {children}
+    </Modal>
+  );
+};
+
+export default React.memo(CommonModal);

src/components/Upload/UploadImages/index.tsx

@@ -120,41 +120,45 @@ const UploadImages: React.FC<{
 
         message.success('上传成功');
       } else {
+        setUploading(false);
         throw new Error('上传失败');
       }
     } catch (error) {
-      console.error('Upload error:', error);
+      setUploading(false);
-      onError?.(error as Error);
       message.error(`上传失败: ${(error as Error).message}`);
     } finally {
+      console.log('finally');
       setUploading(false);
     }
   };
   return (
     <Spin spinning={uploading}>
-      <Upload
+      {uploading}
-        listType="picture-card"
+      <>
-        fileList={fileList}
+        <Upload
-        onPreview={handlePreview}
+          listType="picture-card"
-        onRemove={handleRemove}
+          fileList={fileList}
-        beforeUpload={beforeUpload}
+          onPreview={handlePreview}
-        customRequest={handleLoadImage}
+          onRemove={handleRemove}
-        multiple={multiple}
+          beforeUpload={beforeUpload}
-        accept={accept}
+          customRequest={handleLoadImage}
-      >
+          multiple={multiple}
-        {fileList.length >= maxCount ? null : uploadButton}
+          accept={accept}
-      </Upload>
+        >
-      {previewImage && (
+          {fileList.length >= maxCount ? null : uploadButton}
-        <Image
+        </Upload>
-          wrapperStyle={{ display: 'none' }}
+        {previewImage && (
-          preview={{
+          <Image
-            visible: previewOpen,
+            wrapperStyle={{ display: 'none' }}
-            onVisibleChange: (visible) => setPreviewOpen(visible),
+            preview={{
-            afterOpenChange: (visible) => !visible && setPreviewImage(''),
+              visible: previewOpen,
-          }}
+              onVisibleChange: (visible) => setPreviewOpen(visible),
-          src={previewImage}
+              afterOpenChange: (visible) => !visible && setPreviewImage(''),
-        />
+            }}
-      )}
+            src={previewImage}
+          />
+        )}
+      </>
     </Spin>
   );
 };

src/constants/trade.ts

@@ -1,7 +1,7 @@
 import type { BadgeProps } from 'antd';
 
 export enum OrderStatus {
-  All = 1,
+  All = 0,
   PendingPayment = 10,
   PendingConfirmation = 20,
   PendingService = 30,
@@ -53,3 +53,21 @@ export const mapOrderStatusToBadgeStatus = (
 
   return statusMap[statusColor] || 'default';
 };
+
+export enum SalesStatus {
+  All = 0,
+  Apply = 10,
+  SellerAgree = 20,
+  BuyerDelivery = 30,
+  WaitRefund = 40,
+  Completed = 50,
+}
+
+export const SalesStatusLableMap: Record<SalesStatus, string> = {
+  [SalesStatus.All]: '所有售后单',
+  [SalesStatus.Apply]: '等待审核',
+  [SalesStatus.SellerAgree]: '审核通过',
+  [SalesStatus.BuyerDelivery]: '已完成',
+  [SalesStatus.WaitRefund]: '已取消',
+  [SalesStatus.Completed]: '已拒绝',
+};

src/global.less

@@ -75,7 +75,9 @@ ul,
 ol {
   list-style: none;
 }
-
+.ant-statistic {
+  text-align: center;
+}
 @media (max-width: 768px) {
   .ant-table {
     width: 100%;
@@ -93,6 +95,11 @@ ol {
   }
 }
 
+.ant-table-row {
+  .ant-form-item {
+    margin-block: -16px !important;
+  }
+}
 .page-container {
   background: #fff;
   width: 100%;

src/pages/Welcome.tsx

@@ -131,7 +131,7 @@ const Welcome: React.FC = () => {
             百业到家 是一个整合了 umi，Ant Design 和 ProComponents
             的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
           </p>
-          <div
+          {/* <div
             style={{
               display: 'flex',
               flexWrap: 'wrap',
@@ -156,7 +156,7 @@ const Welcome: React.FC = () => {
               href="https://procomponents.ant.design"
               desc="ProComponents 是一个基于 Ant Design 做了更高抽象的模板组件，以 一个组件就是一个页面为开发理念，为中后台开发带来更好的体验。"
             />
-          </div>
+          </div> */}
         </div>
       </Card>
     </PageContainer>

src/pages/prod/list/components/prod-info.tsx

@@ -27,20 +27,60 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
           name="prodName"
           label="商品名字"
           rules={[{ required: true }]}
-          width="xl"
+          colProps={{
+            span: 24,
+          }}
+        />
+        <ProFormText
+          name="abbreviation"
+          label="商品简称"
+          colProps={{
+            span: 24,
+          }}
+        />
+        <ProFormText
+          name="brief"
+          label="商品概述"
+          colProps={{
+            span: 24,
+          }}
+        />
+        <ProFormText
+          name="prodNumber"
+          label="商品编码"
+          colProps={{
+            span: 24,
+          }}
+        />
+        <ProFormText
+          name="brand"
+          label="品牌"
+          colProps={{
+            span: 24,
+          }}
+        />
+        <ProFormText
+          name="shopId"
+          label="商品所有权"
+          colProps={{
+            span: 24,
+          }}
+        />
+        <ProFormText
+          name="categoryName"
+          label="关联类目"
+          colProps={{
+            span: 24,
+          }}
         />
-        <ProFormText name="abbreviation" label="商品简称" width="xl" />
-        <ProFormText name="brief" label="商品概述" width="xl" />
-        <ProFormText name="prodNumber" label="商品编码" width="xl" />
-        <ProFormText name="brand" label="品牌" width="xl" />
-        <ProFormText name="shopId" label="商品所有权" width="xl" />
-        <ProFormText name="categoryName" label="关联类目" width="xl" />
         <ProForm.Item
           name="tag"
           label="商品标签"
           tooltip="设置卖点标签，单标签限xx字符，最多x个标签"
           layout="horizontal"
-          width="xl"
+          colProps={{
+            span: 24,
+          }}
           required={false}
           // getValueFromEvent={(e) => e.fileList}
         >
@@ -58,7 +98,9 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
           style={{ width: '100%' }}
           name="pic"
           label="主图"
-          width="xl"
+          colProps={{
+            span: 24,
+          }}
           extra="仅支持.jpg .png 格式，建议图片比例1:1，限1张"
           // rules={[{ required: true }]}
           // getValueFromEvent={(e) => e.fileList}
@@ -70,7 +112,9 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
           name="imgs"
           label="轮播图"
           layout="horizontal"
-          width="xl"
+          colProps={{
+            span: 24,
+          }}
           extra="仅支持.jpg .png 格式，建议图片比例1:1，限7张"
           // getValueFromEvent={(e) => e.fileList}
         >
@@ -80,16 +124,21 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
           style={{ width: '100%' }}
           name="whiteImg"
           label="白底图"
-          width="xl"
+          colProps={{
+            span: 24,
+          }}
           extra="仅支持.jpg .png 格式，建议图片比例1:1，限1张"
           // getValueFromEvent={(e) => e.fileList}
         >
           <UploadImages />
         </ProForm.Item>
         <ProForm.Item
+          style={{ width: '100%' }}
           name="video"
           label="主视频"
-          width="xl"
+          colProps={{
+            span: 24,
+          }}
           extra="仅支持.MP4 .MOV 格式，建议比例1:1、16:9，限1个"
           // getValueFromEvent={(e) => e.fileList}
         >
@@ -99,7 +148,9 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
           name="content"
           label="图文介绍"
           rules={[{ required: true }]}
-          width="xl"
+          colProps={{
+            span: 24,
+          }}
           // getValueFromEvent={(e) => e.fileList}
         >
           <TinymceEditor />
@@ -110,7 +161,7 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
           name="seoShortName"
           label="短标题"
           colProps={{
-            span: 20,
+            span: 24,
           }}
         />
         <ProFormText name="seoSearch" label="SEO标题" width={'xl'} />
@@ -118,7 +169,9 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
         <Divider />
 
         <ProForm.Item
-          style={{ width: '100%' }}
+          colProps={{
+            span: 24,
+          }}
           name="shareImage"
           label="分享图"
           width="xl"
@@ -130,7 +183,9 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
           name="shareContent"
           label="分享话术"
           placeholder={'请输入分享话术'}
-          width={'xl'}
+          colProps={{
+            span: 24,
+          }}
         />
       </ProFormGroup>
       <ProFormGroup>

src/pages/prod/list/components/service-rule/index.tsx

@@ -1,67 +1,85 @@
 import { ProForm, ProFormText } from '@ant-design/pro-components';
+import { Anchor, Col, Form, Row } from 'antd';
+import ProdReservationConfig from './prodReservationConfig';
+import ProdServiceAreasInfo from './prodServiceAreasInfo';
+import ProdWeightConfig from './prodWeightConfig';
 
 const ServiceRule: React.FC = () => {
   return (
-    <ProForm<{
+    <ProForm
-      name: string;
+      onFinish={async (value) => console.log(value)}
-      company: string;
+      layout="horizontal"
-    }>
+      style={{ width: '100%' }}
-      grid
+      labelCol={{ span: '100px' }}
-      onFinish={async (values) => {
-        // await waitTime(2000);
-        console.log(values);
-        // message.success('提交成功');
-      }}
-      initialValues={{
-        name: '蚂蚁设计有限公司',
-        useMode: 'chapter',
-      }}
     >
-      <ProForm.Group>
+      <Row gutter={24}>
-        <ProFormText
+        <Col span={18}>
-          width="md"
+          <div id="prodServiceAreasInfo">
-          name="name"
+            <ProdServiceAreasInfo />
-          label="签约客户名称"
+          </div>
-          tooltip="最长为 24 位"
+          <div id="prodReservationConfig">
-          placeholder="请输入名称"
+            <ProForm.Group>
-        />
+              <ProdReservationConfig />
-        <ProFormText
+            </ProForm.Group>
-          width="md"
+          </div>
-          name="company"
+          <div id="prodEmergencyInfoVO">
-          label="我方公司名称"
+            <ProForm.Group></ProForm.Group>
-          placeholder="请输入名称"
+          </div>
-        />
+          <div id="productOrderLimitVO">
-      </ProForm.Group>
+            <ProForm.Group title="周期接单上限"></ProForm.Group>
-      <ProFormText width="sm" name="id" label="主合同编号" />
+          </div>
-      <ProForm.Item
+          <div id="prodAdditionalFeeDatesList">
-        label="数组数据"
+            <ProForm.Group title="特殊时段规则"></ProForm.Group>
-        name="dataSource"
+          </div>
-        // initialValue={defaultData}
+          <div id="prodAdditionalFeePeriodsList">
-        trigger="onValuesChange"
+            <ProForm.Group title="特殊日期规则"></ProForm.Group>
-      >
+          </div>
-        {/* <EditableProTable<DataSourceType>
+          <div id="prodWeightConfig">
-          rowKey="id"
+            <ProdWeightConfig />
-          toolBarRender={false}
+          </div>
-          columns={columns}
+        </Col>
-          recordCreatorProps={{
+        <Col span="400px">
-            newRecordType: 'dataSource',
+          <Anchor
-            position: 'top',
+            items={[
-            record: () => ({
+              {
-              id: Date.now(),
+                key: 'prodServiceAreasInfo',
-              addonBefore: 'ccccccc',
+                href: '#prodServiceAreasInfo',
-              decs: 'testdesc',
+                title: '可服务区域',
-            }),
+              },
-          }}
+              {
-          editable={{
+                key: 'prodReservationConfig',
-            type: 'multiple',
+                href: '#prodReservationConfig',
-            editableKeys,
+                title: '可预约时段',
-            onChange: setEditableRowKeys,
+              },
-            actionRender: (row, _, dom) => {
+              {
-              return [dom.delete];
+                key: 'prodEmergencyInfoVO',
-            },
+                href: '#prodEmergencyInfoVO',
-          }} */}
+                title: '紧急响应服务',
-        {/* /> */}
+              },
-      </ProForm.Item>
+              {
+                key: 'productOrderLimitVO',
+                href: '#productOrderLimitVO',
+                title: '周期接单上限',
+              },
+              {
+                key: 'prodAdditionalFeeDatesList',
+                href: '#prodAdditionalFeeDatesList',
+                title: '特殊时段规则',
+              },
+              {
+                key: 'prodAdditionalFeePeriodsList',
+                href: '#prodAdditionalFeePeriodsList',
+                title: '特殊日期规则',
+              },
+              {
+                key: 'prodWeightConfig',
+                href: '#prodWeightConfig',
+                title: '体重/体型选项',
+              },
+            ]}
+          />
+        </Col>
+      </Row>
     </ProForm>
   );
 };

src/pages/prod/list/components/service-rule/prodReservationConfig.tsx

@@ -0,0 +1,139 @@
+import {
+  ProFormCheckbox,
+  ProFormDigit,
+  ProFormRadio,
+  ProFormSelect,
+  ProFormSwitch,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Divider, Space, Typography } from 'antd';
+import React from 'react';
+import type { ProdReservationInfoVO } from '@/services/prod/prod-manager/rule';
+
+const { Text, Title } = Typography;
+type ValueConfig = {
+  reservationSwitch?: number;
+  prodReservationConfig?: ProdReservationInfoVO;
+};
+interface ProdReservationConfigProps {
+  value?: ValueConfig;
+  onChange?: (value?: ValueConfig) => void;
+}
+const ProdReservationConfig: React.FC<ProdReservationConfigProps> = (props) => {
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          gap: 12,
+        }}
+      >
+        <div>
+          <Title level={4}>服务区域配置</Title>
+          <Text type="secondary">
+            默认服务区域为全城，开启此配置，可自定义可服务区域以及超区时的限制规则
+          </Text>
+        </div>
+
+        <ProFormSwitch
+          name="reservationSwitch"
+          label="应用配置"
+          labelCol={{ span: 13 }}
+          fieldProps={{
+            onChange: (checked) => {
+              props.onChange?.({
+                reservationSwitch: checked ? 1 : 0,
+              });
+            },
+            checkedChildren: '开启',
+            unCheckedChildren: '关闭',
+          }}
+        />
+      </div>
+      <Divider />
+      <ProFormDigit
+        name="advanceHours"
+        label="预约时间约定"
+        wrapperCol={{ span: 11 }}
+        rules={[
+          {
+            required: true,
+            message: '请输入提前预约时间',
+          },
+        ]}
+        fieldProps={{
+          placeholder: '请输入提前预约时间',
+          min: 0,
+          max: 24,
+          addonBefore: '提前',
+          addonAfter: '小时',
+        }}
+      />
+      <ProFormRadio.Group
+        name="reservationDateRange"
+        label="预约日期范围"
+        options={[
+          { label: '7天', value: 7 },
+          { label: '10天', value: 10 },
+          { label: '15天', value: 15 },
+          { label: '30天', value: 30 },
+        ]}
+        rules={[
+          {
+            required: true,
+            message: '请选择预约日期范围',
+          },
+        ]}
+      />
+      <ProFormRadio.Group
+        name="allowChange"
+        label="更改预约时间"
+        options={[
+          { label: '允许更改预约时间', value: 1 },
+          { label: '禁止更改预约时间', value: 0 },
+        ]}
+        rules={[
+          {
+            required: true,
+            message: '请选择更改预约时间',
+          },
+        ]}
+      />
+      <ProFormRadio.Group
+        name="changeTimeRule"
+        label="时间更改规则"
+        options={[
+          { label: '服务开始前 1小时 可更改预约时间', value: 1 },
+          { label: '服务开始前 2小时 可更改预约时间', value: 2 },
+          { label: '服务开始前 3小时 可更改预约时间', value: 3 },
+        ]}
+        rules={[
+          {
+            required: true,
+            message: '请选择时间更改规则',
+          },
+        ]}
+      />
+      <ProFormRadio.Group
+        name="maxChangeTimes"
+        label="更改次数规则"
+        options={[
+          { label: '允许修改 1 次', value: 1 },
+          { label: '允许修改 2 次', value: 2 },
+          { label: '允许修改 3 次', value: 3 },
+        ]}
+        rules={[
+          {
+            required: true,
+            message: '请选择时间更改规则',
+          },
+        ]}
+      />
+    </>
+  );
+};
+
+export default React.memo(ProdReservationConfig);

src/pages/prod/list/components/service-rule/prodServiceAreasInfo.tsx

@@ -0,0 +1,115 @@
+import {
+  ProFormCheckbox,
+  ProFormDigit,
+  ProFormRadio,
+  ProFormSelect,
+  ProFormSwitch,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Divider, Space, Typography } from 'antd';
+import React from 'react';
+import type { ProdServiceAreasInfoVO } from '@/services/prod/prod-manager/rule';
+
+const { Text, Title } = Typography;
+
+type ValueConfig = {
+  regionSwitch?: number;
+  prodServiceAreasInfo?: ProdServiceAreasInfoVO;
+};
+interface ProdServiceAreasInfoProps {
+  value?: ValueConfig;
+  onChange?: (value?: ValueConfig) => void;
+}
+const ProdServiceAreasInfo: React.FC<ProdServiceAreasInfoProps> = (props) => {
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          gap: 12,
+        }}
+      >
+        <div>
+          <Title level={4}>服务区域配置</Title>
+          <Text type="secondary">
+            默认服务区域为全城，开启此配置，可自定义可服务区域以及超区时的限制规则
+          </Text>
+        </div>
+        <ProFormSwitch
+          name="regionSwitch"
+          label="应用配置"
+          labelCol={{ span: 13 }}
+          fieldProps={{
+            onChange: (checked) => {
+              props.onChange?.({
+                regionSwitch: checked ? 1 : 0,
+              });
+            },
+            checkedChildren: '开启',
+            unCheckedChildren: '关闭',
+          }}
+        />
+      </div>
+
+      <Divider />
+
+      <ProFormSelect
+        name="areaNameList"
+        label="服务区域"
+        options={[
+          '鼓楼区',
+          '台江区',
+          '晋安区',
+          '马尾区',
+          '闽侯县',
+          '福清市（县级市）',
+          '长乐区',
+          '罗源县',
+          '永泰县',
+          '平潭县',
+        ]}
+        fieldProps={{
+          mode: 'multiple',
+        }}
+        placeholder="请选择服务区域"
+        rules={[
+          {
+            required: true,
+            message: '请选择服务区域',
+            type: 'array',
+          },
+        ]}
+      />
+      <ProFormRadio.Group
+        name="ruleType"
+        label="超区规则"
+        options={[
+          { label: '拒单', value: 0 },
+          { label: '接单-收超区费', value: 2 },
+          { label: '接单-收超区费-收超区费', value: 3 },
+        ]}
+        rules={[
+          {
+            required: true,
+            message: '请选择服务区域',
+          },
+        ]}
+      />
+      <ProFormDigit
+        rules={[
+          {
+            required: true,
+            message: '请设置费用',
+          },
+        ]}
+        label="设置费用"
+        name="fee"
+      />
+    </>
+  );
+};
+
+export default React.memo(ProdServiceAreasInfo);

src/pages/prod/list/components/service-rule/prodWeightConfig.tsx

@@ -0,0 +1,278 @@
+import {
+  DragSortTable,
+  EditableProTable,
+  type ProColumns,
+  ProFormCheckbox,
+  ProFormDigit,
+  ProFormRadio,
+  ProFormSelect,
+  ProFormSwitch,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Divider, Space, Typography } from 'antd';
+import React from 'react';
+import type {
+  ProdWeightRangePricesDO,
+  ProdWeightRangePricesSaveInfoVO,
+} from '@/services/prod/prod-manager/rule';
+
+const { Text, Title } = Typography;
+type ValueConfig = {
+  weightSwitch?: number;
+  prodWeightConfig?: ProdWeightRangePricesSaveInfoVO;
+};
+interface ProdWeightConfigProps {
+  value?: ValueConfig;
+  onChange?: (value?: ValueConfig) => void;
+}
+
+const columns = [
+  {
+    title: '体型&体重',
+    dataIndex: 'name',
+    key: 'name',
+    width: '20%',
+    render: (text: string, record: any) => {
+      return <ProFormText name={record.key} label={text} />;
+    },
+  },
+  {
+    title: '价格',
+    dataIndex: 'price',
+    key: 'price',
+    width: '20%',
+  },
+  {
+    title: '操作',
+    dataIndex: 'price',
+    key: 'price',
+    width: '20%',
+  },
+];
+const prodWeightConfig: React.FC<ProdWeightConfigProps> = (props) => {
+  const { value } = props;
+  const columns: ProColumns<ProdWeightRangePricesDO>[] = [
+    {
+      title: '体型&体重 *',
+      dataIndex: 'weightRange',
+      width: '30%',
+      formItemProps: {
+        rules: [
+          {
+            required: true,
+            whitespace: true,
+            message: '此项是必填项',
+          },
+        ],
+      },
+    },
+    {
+      title: '价格 *',
+      dataIndex: 'price',
+      width: '30%',
+      formItemProps: {
+        rules: [
+          {
+            required: true,
+            whitespace: true,
+            message: '此项是必填项',
+          },
+        ],
+      },
+    },
+
+    {
+      title: '操作',
+      valueType: 'option',
+      width: 250,
+      render: () => {
+        return null;
+      },
+    },
+  ];
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          gap: 12,
+        }}
+      >
+        <div>
+          <Title level={4}>服务区域配置</Title>
+          <Text type="secondary">
+            默认服务区域为全城，开启此配置，可自定义可服务区域以及超区时的限制规则
+          </Text>
+        </div>
+        <ProFormSwitch
+          name="weightSwitch"
+          label="应用配置"
+          labelCol={{ span: 13 }}
+          fieldProps={{
+            onChange: (checked) => {
+              props.onChange?.({
+                weightSwitch: checked ? 1 : 0,
+              });
+            },
+            checkedChildren: '开启',
+            unCheckedChildren: '关闭',
+          }}
+        />
+      </div>
+
+      <Divider />
+      <ProFormRadio.Group
+        name="isWeightCharge"
+        label="是否收费"
+        options={[
+          {
+            label: '是',
+            value: 0,
+          },
+          {
+            label: '否',
+            value: 1,
+          },
+        ]}
+        rules={[
+          {
+            required: true,
+            message: '请选择是否收费',
+          },
+        ]}
+      />
+      {/* <EditableProTable<ProdWeightRangePricesDO>
+      rowKey="id"
+      headerTitle="可拖拽编辑表格"
+      maxLength={10}
+      recordCreatorProps={{
+        position: 'bottom',
+        record: () => ({ id: Date.now().toString(), weightRange: '', price: 0, }),
+      }}
+      columns={columns}
+      value={dataSource}
+      onChange={setDataSource}
+      editable={{
+        type: 'multiple',
+        editableKeys,
+        onSave: async (rowKey, data) => {
+          console.log('保存数据:', data);
+        },
+        onChange: setEditableRowKeys,
+      }}
+      // 拖拽排序配置
+      dragSortKey="sort"
+      onDragSortEnd={(newDataSource) => {
+        console.log('排序后:', newDataSource);
+        setDataSource(newDataSource as DataType[]);
+      }}
+    /> */}
+    </>
+  );
+};
+
+export default React.memo(prodWeightConfig);
+
+// import { EditableProTable } from '@ant-design/pro-components';
+// import type { ProColumns } from '@ant-design/pro-components';
+// import { useState } from 'react';
+// import { MenuOutlined } from '@ant-design/icons';
+
+// interface DataType {
+//   id: string;
+//   name: string;
+//   age: number;
+//   email: string;
+// }
+
+// const DragEditableProTable: React.FC = () => {
+//   const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
+//   const [dataSource, setDataSource] = useState<DataType[]>([
+//     { id: '1', name: '张三', age: 25, email: 'zhangsan@example.com' },
+//     { id: '2', name: '李四', age: 30, email: 'lisi@example.com' },
+//     { id: '3', name: '王五', age: 28, email: 'wangwu@example.com' },
+//   ]);
+
+//   const columns: ProColumns<DataType>[] = [
+//     {
+//       title: '排序',
+//       dataIndex: 'sort',
+//       width: 60,
+//       render: () => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />,
+//     },
+//     {
+//       title: '姓名',
+//       dataIndex: 'name',
+//       formItemProps: {
+//         rules: [{ required: true, message: '请输入姓名' }],
+//       },
+//     },
+//     {
+//       title: '年龄',
+//       dataIndex: 'age',
+//       valueType: 'digit',
+//     },
+//     {
+//       title: '邮箱',
+//       dataIndex: 'email',
+//       valueType: 'text',
+//     },
+//     {
+//       title: '操作',
+//       valueType: 'option',
+//       width: 200,
+//       render: (text, record, _, action) => [
+//         <a
+//           key="editable"
+//           onClick={() => {
+//             action?.startEditable?.(record.id);
+//           }}
+//         >
+//           编辑
+//         </a>,
+//         <a
+//           key="delete"
+//           onClick={() => {
+//             setDataSource(dataSource.filter((item) => item.id !== record.id));
+//           }}
+//         >
+//           删除
+//         </a>,
+//       ],
+//     },
+//   ];
+
+//   return (
+//     <EditableProTable<DataType>
+//       rowKey="id"
+//       headerTitle="可拖拽编辑表格"
+//       maxLength={10}
+//       recordCreatorProps={{
+//         position: 'bottom',
+//         record: () => ({ id: Date.now().toString(), name: '', age: 0, email: '' }),
+//       }}
+//       columns={columns}
+//       value={dataSource}
+//       onChange={setDataSource}
+//       editable={{
+//         type: 'multiple',
+//         editableKeys,
+//         onSave: async (rowKey, data) => {
+//           console.log('保存数据:', data);
+//         },
+//         onChange: setEditableRowKeys,
+//       }}
+//       // 拖拽排序配置
+//       dragSortKey="sort"
+//       onDragSortEnd={(newDataSource) => {
+//         console.log('排序后:', newDataSource);
+//         setDataSource(newDataSource as DataType[]);
+//       }}
+//     />
+//   );
+// };
+
+// export default DragEditableProTable;

src/pages/prod/list/detail.tsx

@@ -6,16 +6,9 @@ import ProdInfo from '@/pages/prod/list/components/prod-info';
 import Sku from '@/pages/prod/list/components/sku';
 import type { Prod, ProdDetail, SkuConfig } from '@/services/prod/prod-manager';
 
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
 const ProdDetailPage: React.FC<{
   data?: Prod;
+  type?: string;
   formRef?: React.RefObject<FormInstance<any>>;
 }> = (props) => {
   const { data, formRef } = props;
@@ -42,8 +35,8 @@ const ProdDetailPage: React.FC<{
           formRef={formRef}
           submitter={false}
           onFinish={async () => {
-            await waitTime(1000);
+            // await waitTime(1000);
-            message.success('提交成功');
+            // message.success('提交成功');
           }}
           formProps={{
             validateMessages: {

src/pages/prod/list/index.tsx

@@ -1,5 +1,6 @@
 import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
+import { useNavigate } from '@umijs/max';
 import type { MenuProps, TabsProps } from 'antd';
 import { Button, Dropdown, Space, Tabs } from 'antd';
 import { useCallback, useRef, useState } from 'react';
@@ -25,6 +26,7 @@ const ProdList = () => {
   const [type, setType] = useState<'create' | 'update' | 'test'>('create');
   const [status, setStatus] = useState<number>();
   const detailRef = useRef<ConfigurableDrawerFormRef>(null);
+  const navigator = useNavigate();
   // const editRef = useRef<ConfigurableDrawerFormRef>(null);
   const [id, setId] = useState<number>(0);
   const onChange = useCallback(
@@ -89,6 +91,12 @@ const ProdList = () => {
     [id, type],
   );
 
+  const handleLink = (key: string, row: Prod) => {
+    if (key === 'sku') {
+      // navigator(`/prod/list/sku/${row.prodId}`);
+    }
+    console.log(key, row);
+  };
   // const renderDetailFooter = () => {
   //   if (type === "update") {
   //     return (
@@ -118,7 +126,11 @@ const ProdList = () => {
     },
     {
       key: 'sku',
-      label: <Button type="link">SKU管理</Button>,
+      label: (
+        <Button type="link" onClick={() => handleLink('sku', row)}>
+          SKU管理
+        </Button>
+      ),
     },
     {
       key: 'rules-service',
@@ -155,7 +167,9 @@ const ProdList = () => {
           <Button type="link" onClick={() => handleEdit(record)}>
             商品编辑
           </Button>
-          <Button type="link">SKU管理</Button>
+          <Button type="link" onClick={() => handleLink('sku', record)}>
+            SKU管理
+          </Button>
         </Space.Compact>
         <Space.Compact direction="vertical" block key="2">
           <Button type="link">服务规则</Button>

src/pages/trade/order/components/createSales.module.less

@@ -0,0 +1,20 @@
+.sales {
+  :global {
+    .ant-pro-card-body {
+      padding: 16px !important;
+    }
+    .ant-pro-card-size-small {
+      .ant-pro-card-header {
+        background: rgba(0, 0, 0, 0.02);
+        min-height: 41px;
+      }
+      .ant-form-item {
+        margin-bottom: 0;
+      }
+      .ant-pro-card-col {
+        flex: 1 auto;
+        overflow: auto;
+      }
+    }
+  }
+}

src/pages/trade/order/components/createSalesModal copy.tsx

@@ -0,0 +1,762 @@
+//新建售后
+
+import {
+  BetaSchemaForm,
+  type EditableFormInstance,
+  EditableProTable,
+  ProCard,
+  type ProColumns,
+  ProForm,
+  type ProFormColumnsType,
+  ProFormDependency,
+  ProFormDigit,
+  ProFormRadio,
+  ProFormTextArea,
+} from '@ant-design/pro-components';
+import {
+  Badge,
+  Button,
+  Divider,
+  Empty,
+  Form,
+  type FormInstance,
+  Input,
+  InputNumber,
+  Space,
+  Spin,
+  Statistic,
+  Table,
+  Typography,
+} from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import EditableProTableCom from '@/components/EditableProTable';
+import CommonModal from '@/components/ModalCom/CommonModal';
+import UploadImages from '@/components/Upload/UploadImages';
+import styles from './createSales.module.less';
+
+const { Title, Text } = Typography;
+
+interface DataType {
+  key: string;
+  name: string;
+  age: number;
+  address: string;
+}
+const originData = Array.from({ length: 100 }).map<DataType>((_, i) => ({
+  key: i.toString(),
+  name: `Edward ${i}`,
+  age: 32,
+  address: `London Park no. ${i}`,
+}));
+
+const waitTime = (time: number = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+const CreateSalesModal = () => {
+  const [loading, setLoading] = useState(false);
+  const formRefSales = useRef<FormInstance>(null);
+  const formRef = useRef<FormInstance>(null);
+
+  const [open, setOpen] = useState<boolean>(false);
+  const handleOk = useCallback(async () => {
+    try {
+      setLoading(true);
+      const values1 = formRef.current?.getFieldsValue();
+      const values2 = formRefSales.current?.getFieldsValue();
+
+      console.log({ ...values1, values2 });
+    } finally {
+      setLoading(false);
+    }
+  }, [open]);
+
+  const onOpen = useCallback(
+    (flag: boolean) => {
+      setOpen(flag);
+    },
+    [open],
+  );
+  const salesColumns: ProFormColumnsType[] = [
+    {
+      title: '售后类型',
+      dataIndex: 'cancelReason',
+      valueType: 'radioButton',
+      formItemProps: {
+        rules: [
+          {
+            required: true,
+          },
+        ],
+      },
+      fieldProps: {
+        options: [{ value: '仅退款', label: '仅退款' }],
+      },
+    },
+    {
+      title: '退款类型',
+      dataIndex: 'cancelRemark',
+      valueType: 'radioButton',
+      formItemProps: {
+        rules: [
+          {
+            required: true,
+          },
+        ],
+      },
+      fieldProps: {
+        options: [
+          { value: '整单退款（通用）', label: '整单退款' },
+          { value: '选项二', label: '商品退款' },
+          { value: '选项三', label: '扩展服务退款' },
+          { value: '服务附加费退款', label: '服务附加费退款' },
+          { value: '选项五', label: '退运费' },
+          { value: '其他', label: '其他' },
+        ],
+      },
+    },
+    // {
+    //   title: "",
+    //   dependencies: ["cancelRemark"],
+    //   dataIndex: "cancelRemark1",
+    //   valueType: "textarea",
+    //   formItemProps: {
+    //     rules: [
+    //       {
+    //         required: true,
+    //       },
+    //     ],
+    //   },
+    //   fieldProps: {
+    //     placeholder: "请输入",
+    //   },
+    //   renderFormItem: (schema, config, form) => {
+    //     const grade = form.getFieldValue("cancelRemark");
+    //     if (grade === "其他") {
+    //       return <Input.TextArea placeholder="请输入" rows={4} />;
+    //     }
+    //     if (grade === "服务附加费退款") {
+    //       return (
+    //         <Form.Item>
+    //           <ExtendRefunds />
+    //         </Form.Item>
+    //       );
+    //     }
+    //     return <></>;
+    //   },
+    // },
+  ];
+  const applyColumns: ProFormColumnsType[] = [
+    {
+      title: '售后类型',
+      dataIndex: 'cancelReason1',
+      valueType: 'radio',
+      formItemProps: {
+        rules: [
+          {
+            required: true,
+          },
+        ],
+      },
+      fieldProps: {
+        options: [
+          { value: '用户主动取消', label: '用户主动取消' },
+          { value: '选项二', label: '选项二' },
+          { value: '选项三', label: '选项三' },
+          { value: '选项四', label: '选项四' },
+          { value: '选项五', label: '选项五' },
+          { value: '选项六', label: '选项六' },
+          { value: '选项七', label: '选项七' },
+        ],
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          marginTop: '6px',
+          background: '#f0f0f0',
+          padding: '8px',
+          borderRadius: '8px',
+        },
+      },
+    },
+    {
+      title: '问题描述',
+      dataIndex: 'cancelRemark22',
+      valueType: 'textarea',
+    },
+    {
+      title: '问题凭证',
+      dataIndex: 'cancelRemark23',
+      formItemProps: {
+        extra: '请上传问题凭证，支持.jpg .png 格式，最多 4 张。',
+      },
+      renderFormItem: () => {
+        return <UploadImages multiple={true} maxCount={4} />;
+      },
+    },
+
+    {
+      title: '商家备注',
+      dataIndex: 'cancelRemark2311',
+      valueType: 'textarea',
+    },
+  ];
+
+  return (
+    <>
+      <Button onClick={() => onOpen(true)}>新建售后</Button>
+      <CommonModal
+        title="新建售后单"
+        open={true}
+        onOk={handleOk}
+        onCancel={() => onOpen(false)}
+        confirmLoading={loading}
+      >
+        <Space
+          direction="vertical"
+          style={{ width: '100%' }}
+          size={16}
+          className={styles.sales}
+        >
+          <ProCard.Group direction="row">
+            <ProCard layout="center">
+              <Statistic title="实付金额" value={1000} precision={2} />
+            </ProCard>
+            <ProCard layout="center">
+              <Statistic title="累计退款金额" value={200} precision={2} />
+            </ProCard>
+            <ProCard layout="center">
+              <Statistic title="可退款金额" value={800} precision={2} />
+            </ProCard>
+          </ProCard.Group>
+          <ProCard title="售后选项">
+            <ProForm
+              formRef={formRefSales}
+              layout="horizontal"
+              submitter={false}
+              labelCol={{ style: { width: '80px' } }}
+              labelAlign="right"
+            >
+              <ProFormRadio.Group
+                name="cancelReason"
+                label="售后类型"
+                rules={[{ required: true, message: '请选择售后类型' }]}
+                options={[{ value: '仅退款', label: '仅退款' }]}
+                radioType="button"
+              />
+
+              <ProFormRadio.Group
+                name="cancelRemark"
+                label="退款类型"
+                rules={[{ required: true, message: '请选择退款类型' }]}
+                options={[
+                  { value: '整单退款（通用）', label: '整单退款' },
+                  { value: '选项二', label: '商品退款' },
+                  { value: '选项三', label: '扩展服务退款' },
+                  { value: '服务附加费退款', label: '服务附加费退款' },
+                  { value: '选项五', label: '退运费' },
+                  { value: '其他', label: '其他' },
+                ]}
+                radioType="button"
+              />
+
+              <ConditionalFields />
+            </ProForm>
+          </ProCard>
+
+          <ProCard title="申请信息（通用表单样式，根据当前订单状态调用不同的申请原因表单）">
+            <BetaSchemaForm
+              layoutType="Form"
+              formRef={formRef}
+              columns={applyColumns || []}
+              layout="horizontal"
+              submitter={false}
+              labelCol={{ style: { width: '80px' } }}
+              labelAlign="right"
+            />
+          </ProCard>
+          <ProCard split="vertical" headerBordered title="预估退款明细">
+            <ProCard
+              colSpan={'50%'}
+              headerBordered
+              title="预估退款明细"
+              size="small"
+            >
+              <Space align="center" style={{ marginBottom: 16 }}>
+                <div>
+                  <Text type="danger">最高退款金额</Text>
+                  <Text type="secondary">（不含虚拟资产）</Text>
+                </div>
+                <ProFormDigit
+                  name="input-number"
+                  min={1}
+                  max={10}
+                  fieldProps={{
+                    precision: 0,
+                    prefix: '￥',
+                    style: { width: '100px', margin: 0 },
+                  }}
+                />
+              </Space>
+              <div>
+                <Text type="secondary">
+                  退款金额上限 <Text type="danger">¥700</Text>
+                  ，金额不支持修改，优惠券、积分、余额等虚拟资产不支持修改，虚拟资产将随退款而原路退回，具体金额以实际情况为准。
+                </Text>
+              </div>
+              <Divider />
+              <Title level={5}>预估退款项</Title>
+              <Space direction="vertical" size={8} style={{ width: '100%' }}>
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>商品/服务</Text>
+                      <Text>合计¥500</Text>
+                    </div>
+                  }
+                />
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>增值/扩展服务</Text>
+                      <Text>合计¥500</Text>
+                    </div>
+                  }
+                />
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>运费</Text>
+                      <Text>合计¥500</Text>
+                    </div>
+                  }
+                />
+              </Space>
+            </ProCard>
+            <ProCard
+              size="small"
+              headerBordered
+              title="预估退款至"
+              colSpan={'50%'}
+            >
+              <Title level={5}>
+                预估退款项
+                <Text type="secondary">（退款方式：原支付方式返还）</Text>
+              </Title>
+              <Space direction="vertical" size={8} style={{ width: '100%' }}>
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>
+                        微信支付
+                        <Text type="secondary">（建设银行 尾号1626）</Text>
+                      </Text>
+                      <Text>¥500</Text>
+                    </div>
+                  }
+                />
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>
+                        钱包余额
+                        <Text type="secondary">（个人钱包 编号1090）</Text>
+                      </Text>
+                      <Text>¥500</Text>
+                    </div>
+                  }
+                />
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>宠豆豆(积分)</Text>
+                      <Text>¥500</Text>
+                    </div>
+                  }
+                />
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>红包</Text>
+                      <Text>¥500</Text>
+                    </div>
+                  }
+                />
+              </Space>
+              <Divider />
+              <Title level={5}>预估扣除项</Title>
+              <Text type="secondary">
+                如果后续有设计退款时扣除比例的设定才会存在此字段。目前暂时不做这个业务逻辑，仅为布局占位。
+              </Text>
+              <Space direction="vertical" size={8} style={{ width: '100%' }}>
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>
+                        违约金
+                        <Text type="secondary">（服务开始前60分钟内退款）</Text>
+                      </Text>
+                      <Text>¥500</Text>
+                    </div>
+                  }
+                />
+              </Space>
+            </ProCard>
+          </ProCard>
+        </Space>
+      </CommonModal>
+    </>
+  );
+};
+type DataSourceType = {
+  id: React.Key;
+  prod?: string;
+  num?: number;
+  state?: string;
+  created_at?: number;
+  children?: DataSourceType[];
+};
+
+const columnsSale: ProColumns<DataSourceType>[] = [
+  {
+    title: '商品',
+    dataIndex: 'prod',
+    editable: () => false,
+  },
+  {
+    title: '退款信息',
+    key: 'refund',
+    editable: () => false,
+    dataIndex: 'state',
+  },
+  {
+    title: '退款数量',
+    dataIndex: 'num',
+    valueType: 'digit',
+    editable: () => true,
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入退款数量',
+        },
+      ],
+    },
+  },
+];
+
+const defaultData: DataSourceType[] = new Array(20).fill(1).map((_, index) => {
+  return {
+    id: (Date.now() + index).toString(),
+    prod: `活动名称${index}`,
+    num: index,
+    state: 'open',
+    created_at: 1590486176000,
+  };
+});
+
+const ExtendRefunds = (props: {
+  onChange?: (value: readonly DataSourceType[]) => void;
+}) => {
+  const [data, setData] = useState<readonly DataSourceType[]>([]);
+  const [loading, setLoading] = useState(true);
+  const editorFormRef = useRef<EditableFormInstance<DataSourceType>>(null);
+  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
+  const [formformSales] = Form.useForm();
+  const [formExtend] = Form.useForm();
+  const [formServeExtFee] = Form.useForm();
+  const [formShippingFee] = Form.useForm();
+  const fetchData = async () => {
+    await waitTime();
+    setData(defaultData);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+  useEffect(() => {
+    props.onChange?.(data);
+  }, [data, props.onChange]);
+
+  useEffect(() => {
+    setEditableRowKeys(data!.map((item) => item.id));
+  }, [data]);
+  console.log(editableKeys);
+  return (
+    <EditableProTable
+      value={defaultData}
+      columns={columnsSale}
+      rowKey="id"
+      recordCreatorProps={false}
+      editable={{
+        // form: formformSales,
+        editableKeys: editableKeys,
+        onChange: setEditableRowKeys,
+        onValuesChange: (record, recordList) => {
+          setData(recordList);
+        },
+      }}
+    />
+    // <EditableProTableCom<DataSourceType>
+    //   columns={columnsSale}
+    //   value={defaultData}
+    //   rowKey="id"
+    //   rowSelection={{
+    //     selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
+    //   }}
+    //   editable={{
+    //     form: formformSales,
+    //     editableKeys: editableKeys,
+    //     onChange: setEditableRowKeys,
+    //     onValuesChange: (record, recordList) => {
+    //       setData(recordList);
+    //     },
+    //   }}
+    // />
+  );
+};
+// const ExtendRefunds = (props: {
+//   onChange?: (value: readonly DataSourceType[]) => void;
+// }) => {
+//   const [data, setData] = useState<readonly DataSourceType[]>([]);
+//   const [loading, setLoading] = useState(true);
+//   const editorFormRef = useRef<EditableFormInstance<DataSourceType>>(null);
+//   const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
+//   const [formformSales] = Form.useForm();
+//   const [formExtend] = Form.useForm();
+//   const [formServeExtFee] = Form.useForm();
+//   const [formShippingFee] = Form.useForm();
+
+//   const fetchData = async () => {
+//     await waitTime();
+//     setData(defaultData);
+//     setLoading(false);
+//   };
+
+//   useEffect(() => {
+//     fetchData();
+//   }, []);
+//   useEffect(() => {
+//     props.onChange?.(data);
+//   }, [data]);
+
+//   useEffect(() => {
+//     setEditableRowKeys(data!.map((item) => item.id));
+//     console.log(data);
+//   }, [data]);
+
+//   const renderContent = useCallback(() => {
+//     // if (data.length === 0 && !loading) {
+//     //   return (
+//     //     <div>
+//     //     <Empty
+//     //       description="订单无此退款项/类型"
+//     //       style={{
+//     //         background: "#fff",
+//     //         padding: "16px",
+//     //         margin: 0,
+//     //         borderRadius: "4px",
+//     //       }}
+//     //     />
+//     //   </div>);
+//     // }
+//     return (
+//       <Spin spinning={loading} >
+//         <EditableProTable<DataSourceType>
+//           columns={columnsSale}
+//           rowKey="id"
+//           rowSelection={{
+//             selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
+//           }}
+//           value={data}
+//           editable={{
+//             form: formformSales,
+//             editableKeys: data.map((item) => item.id),
+//             onChange: setEditableRowKeys,
+//             onValuesChange: (record, recordList) => {
+//               setData(recordList);
+//             },
+//           }}
+//         />
+//         {/* <EditableProTableCom<DataSourceType>
+//               columns={columnsSale}
+//               rowKey="id"
+//               value={data}
+//               key={"sale"}
+//               // onChange={onTableChange}
+//               rowSelection={{
+//                 selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
+//               }}
+//               editable={{
+//                 form: formformSales,
+//                 editableKeys: data.map((item) => item.id),
+//                 onChange: setEditableRowKeys,
+//                 // onValuesChange: (record, recordList) => {
+//                 //   setData(recordList);
+//                 // },
+//               }}
+//             />
+//           </ProCard>
+//           <ProCard title="退款项">
+//             <EditableProTableCom<DataSourceType>
+//               columns={columnsSale}
+//               rowKey="id"
+//               value={data}
+//               // onChange={onTableChange}
+//               rowSelection={{
+//                 selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
+//               }}
+//               key={"sale1"}
+//               editable={{
+//                 form: formExtend,
+//                 editableKeys,
+//                 onChange: setEditableRowKeys,
+//                 // onValuesChange: (record, recordList) => {
+//                 //   setData(recordList);
+//                 // },
+//               }}
+//             />
+//           </ProCard>
+//           <ProCard>
+//             <EditableProTableCom<DataSourceType>
+//               columns={columns}
+//               rowKey="id"
+//               value={data}
+//               // onChange={onTableChange}
+//               rowSelection={{
+//                 selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
+//               }}
+//               key={"sale2"}
+//               editable={{
+//                 form: formServeExtFee,
+//                 editableKeys,
+//                 onChange: setEditableRowKeys,
+//                 // onValuesChange: (record, recordList) => {
+//                 //   setData(recordList);
+//                 // },
+//               }}
+//             />
+//           </ProCard>
+//           <ProCard>
+//             <EditableProTableCom<DataSourceType>
+//               columns={columns}
+//               rowKey="id"
+//               value={data}
+//               key={"sale4"}
+//               onChange={onTableChange}
+//               rowSelection={{
+//                 selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
+//               }}
+//               editable={{
+//                 form: formShippingFee,
+//                 editableKeys,
+//                 onChange: setEditableRowKeys,
+//                 // onValuesChange: (record, recordList) => {
+//                 //   setData(recordList);
+//                 // },
+//               }}
+//             />
+//           </ProCard> */}
+//       </Spin>
+//     );
+//   }, [loading, data]);
+//   return <div key="salcessw"> {renderContent()}</div>;
+// };
+
+export default CreateSalesModal;
+
+const ConditionalFields: React.FC = () => {
+  const cancelRemark = Form.useWatch('cancelRemark', { preserve: true });
+
+  if (cancelRemark === '其他') {
+    return (
+      <ProFormTextArea
+        name="cancelRemarkText"
+        label=""
+        placeholder="请输入"
+        rules={[{ required: true, message: '请输入内容' }]}
+        fieldProps={{
+          rows: 4,
+        }}
+      />
+    );
+  }
+
+  if (cancelRemark === '服务附加费退款') {
+    return (
+      <ProForm.Item name="extendRefunds" label="">
+        <ExtendRefunds />
+      </ProForm.Item>
+    );
+  }
+
+  return null;
+};

src/pages/trade/order/components/createSalesModal.tsx

@@ -0,0 +1,609 @@
+import {
+  BetaSchemaForm,
+  ProCard,
+  type ProFormColumnsType,
+} from '@ant-design/pro-components';
+import {
+  Badge,
+  Button,
+  Divider,
+  Form,
+  Input,
+  InputNumber,
+  message,
+  Radio,
+  Space,
+  Statistic,
+  Table,
+  Typography,
+} from 'antd';
+import React, { useCallback, useEffect, useState } from 'react';
+import CommonModal from '@/components/ModalCom/CommonModal';
+import styles from './createSales.module.less';
+
+const { Title, Text } = Typography;
+
+type DataSourceType = {
+  id: React.Key;
+  prod: string;
+  num: number;
+  state: string;
+  availableNum: number; // 新增：可退款数量
+};
+
+const CreateSalesModal = () => {
+  const [loading, setLoading] = useState(false);
+  const [formSales] = Form.useForm();
+  const [formApply] = Form.useForm();
+  const [open, setOpen] = useState<boolean>(false);
+  const [cancelRemarkType, setCancelRemarkType] = useState<string>('');
+
+  const handleOk = useCallback(async () => {
+    try {
+      setLoading(true);
+      const values1 = await formApply.validateFields();
+      const values2 = await formSales.validateFields();
+
+      console.log('申请信息:', values1);
+      console.log('售后信息:', values2);
+      console.log('表格数据:', values2.extendRefunds);
+
+      message.success('提交成功');
+      onOpen(false);
+    } catch (error) {
+      console.error('表单验证失败:', error);
+      message.error('请完善表单信息');
+    } finally {
+      setLoading(false);
+    }
+  }, [formApply, formSales]);
+
+  const onOpen = useCallback(
+    (flag: boolean) => {
+      setOpen(flag);
+      if (!flag) {
+        setCancelRemarkType('');
+        formSales.resetFields();
+        formApply.resetFields();
+      }
+    },
+    [formSales, formApply],
+  );
+
+  const applyColumns: ProFormColumnsType[] = [
+    {
+      title: '售后类型',
+      dataIndex: 'cancelReason1',
+      valueType: 'radio',
+      formItemProps: {
+        rules: [{ required: true }],
+      },
+      fieldProps: {
+        options: [
+          { value: '用户主动取消', label: '用户主动取消' },
+          { value: '选项二', label: '选项二' },
+          { value: '选项三', label: '选项三' },
+          { value: '选项四', label: '选项四' },
+          { value: '选项五', label: '选项五' },
+          { value: '选项六', label: '选项六' },
+          { value: '选项七', label: '选项七' },
+        ],
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          marginTop: '6px',
+          background: '#f0f0f0',
+          padding: '8px',
+          borderRadius: '8px',
+        },
+      },
+    },
+    {
+      title: '问题描述',
+      dataIndex: 'cancelRemark22',
+      valueType: 'textarea',
+    },
+    {
+      title: '商家备注',
+      dataIndex: 'cancelRemark2311',
+      valueType: 'textarea',
+    },
+  ];
+
+  return (
+    <>
+      <Button onClick={() => onOpen(true)}>新建售后</Button>
+      <CommonModal
+        title="新建售后单"
+        open={open}
+        onOk={handleOk}
+        onCancel={() => onOpen(false)}
+        confirmLoading={loading}
+        width={1000}
+      >
+        <Space
+          direction="vertical"
+          style={{ width: '100%' }}
+          size={16}
+          className={styles.sales}
+        >
+          {/* 统计卡片 */}
+          <ProCard.Group direction="row">
+            <ProCard layout="center">
+              <Statistic title="实付金额" value={1000} precision={2} />
+            </ProCard>
+            <ProCard layout="center">
+              <Statistic title="累计退款金额" value={200} precision={2} />
+            </ProCard>
+            <ProCard layout="center">
+              <Statistic title="可退款金额" value={800} precision={2} />
+            </ProCard>
+          </ProCard.Group>
+
+          {/* 售后选项 */}
+          <ProCard title="售后选项">
+            <Form
+              form={formSales}
+              layout="horizontal"
+              labelCol={{ style: { width: '80px' } }}
+              labelAlign="right"
+            >
+              <Form.Item
+                name="cancelReason"
+                label="售后类型"
+                rules={[{ required: true, message: '请选择售后类型' }]}
+              >
+                <Radio.Group buttonStyle="solid">
+                  <Radio.Button value="仅退款">仅退款</Radio.Button>
+                </Radio.Group>
+              </Form.Item>
+
+              <Form.Item
+                name="cancelRemark"
+                label="退款类型"
+                rules={[{ required: true, message: '请选择退款类型' }]}
+              >
+                <Radio.Group
+                  buttonStyle="solid"
+                  onChange={(e) => {
+                    setCancelRemarkType(e.target.value);
+                    // 切换类型时清空相关字段
+                    formSales.setFieldsValue({
+                      cancelRemarkText: undefined,
+                      extendRefunds: undefined,
+                    });
+                  }}
+                >
+                  <Radio.Button value="整单退款（通用）">整单退款</Radio.Button>
+                  <Radio.Button value="选项二">商品退款</Radio.Button>
+                  <Radio.Button value="选项三">扩展服务退款</Radio.Button>
+                  <Radio.Button value="服务附加费退款">
+                    服务附加费退款
+                  </Radio.Button>
+                  <Radio.Button value="选项五">退运费</Radio.Button>
+                  <Radio.Button value="其他">其他</Radio.Button>
+                </Radio.Group>
+              </Form.Item>
+
+              {cancelRemarkType === '其他' && (
+                <Form.Item
+                  name="cancelRemarkText"
+                  label=""
+                  rules={[{ required: true, message: '请输入内容' }]}
+                  labelCol={{ style: { width: '80px' } }}
+                >
+                  <Input.TextArea placeholder="请输入" rows={4} />
+                </Form.Item>
+              )}
+
+              {cancelRemarkType === '服务附加费退款' && (
+                <Form.Item
+                  name="extendRefunds"
+                  label=""
+                  labelCol={{ style: { width: '80px' } }}
+                  rules={[
+                    {
+                      required: true,
+                      validator: (_, value) => {
+                        if (!value || value.length === 0) {
+                          return Promise.reject(
+                            new Error('请至少选择一项服务附加费'),
+                          );
+                        }
+
+                        return Promise.resolve();
+                      },
+                    },
+                  ]}
+                >
+                  <ExtendRefundsTable />
+                </Form.Item>
+              )}
+            </Form>
+          </ProCard>
+
+          {/* 申请信息 */}
+          <ProCard title="申请信息（通用表单样式，根据当前订单状态调用不同的申请原因表单）">
+            <BetaSchemaForm
+              layoutType="Form"
+              form={formApply}
+              columns={applyColumns}
+              layout="horizontal"
+              submitter={false}
+              labelCol={{ style: { width: '80px' } }}
+              labelAlign="right"
+            />
+          </ProCard>
+
+          {/* 预估退款明细 */}
+          <ProCard split="vertical" headerBordered title="预估退款明细">
+            <ProCard
+              colSpan={'50%'}
+              headerBordered
+              title="预估退款明细"
+              size="small"
+            >
+              <Space align="center" style={{ marginBottom: 16 }}>
+                <div>
+                  <Text type="danger">最高退款金额</Text>
+                  <Text type="secondary">（不含虚拟资产）</Text>
+                </div>
+                <InputNumber
+                  min={1}
+                  max={10000}
+                  precision={0}
+                  prefix="￥"
+                  style={{ width: '120px' }}
+                  defaultValue={700}
+                />
+              </Space>
+              <div>
+                <Text type="secondary">
+                  退款金额上限 <Text type="danger">¥700</Text>
+                  ，金额不支持修改，优惠券、积分、余额等虚拟资产不支持修改，虚拟资产将随退款而原路退回，具体金额以实际情况为准。
+                </Text>
+              </div>
+              <Divider />
+              <Title level={5}>预估退款项</Title>
+              <Space direction="vertical" size={8} style={{ width: '100%' }}>
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>商品/服务</Text>
+                      <Text>合计¥500</Text>
+                    </div>
+                  }
+                />
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>增值/扩展服务</Text>
+                      <Text>合计¥500</Text>
+                    </div>
+                  }
+                />
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>运费</Text>
+                      <Text>合计¥500</Text>
+                    </div>
+                  }
+                />
+              </Space>
+            </ProCard>
+            <ProCard
+              size="small"
+              headerBordered
+              title="预估退款至"
+              colSpan={'50%'}
+            >
+              <Title level={5}>
+                预估退款项
+                <Text type="secondary">（退款方式：原支付方式返还）</Text>
+              </Title>
+              <Space direction="vertical" size={8} style={{ width: '100%' }}>
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>
+                        微信支付
+                        <Text type="secondary">（建设银行 尾号1626）</Text>
+                      </Text>
+                      <Text>¥500</Text>
+                    </div>
+                  }
+                />
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>
+                        钱包余额
+                        <Text type="secondary">（个人钱包 编号1090）</Text>
+                      </Text>
+                      <Text>¥500</Text>
+                    </div>
+                  }
+                />
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>宠豆豆(积分)</Text>
+                      <Text>¥500</Text>
+                    </div>
+                  }
+                />
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>红包</Text>
+                      <Text>¥500</Text>
+                    </div>
+                  }
+                />
+              </Space>
+              <Divider />
+              <Title level={5}>预估扣除项</Title>
+              <Text type="secondary">
+                如果后续有设计退款时扣除比例的设定才会存在此字段。目前暂时不做这个业务逻辑，仅为布局占位。
+              </Text>
+              <Space direction="vertical" size={8} style={{ width: '100%' }}>
+                <Badge
+                  status="processing"
+                  style={{ width: '100%' }}
+                  text={
+                    <div
+                      style={{
+                        display: 'inline-flex',
+                        justifyContent: 'space-between',
+                        width: '90%',
+                      }}
+                    >
+                      <Text>
+                        违约金
+                        <Text type="secondary">（服务开始前60分钟内退款）</Text>
+                      </Text>
+                      <Text>¥500</Text>
+                    </div>
+                  }
+                />
+              </Space>
+            </ProCard>
+          </ProCard>
+        </Space>
+      </CommonModal>
+    </>
+  );
+};
+
+const ExtendRefundsTable: React.FC<{
+  value?: DataSourceType[];
+  onChange?: (value: DataSourceType[]) => void;
+}> = ({ value, onChange }) => {
+  const [dataSource, setDataSource] = useState<DataSourceType[]>([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+
+  // 初始化数据 - 默认值为 1，并设置可退款数量
+  useEffect(() => {
+    const initData: DataSourceType[] = Array.from({ length: 10 }).map(
+      (_, index) => ({
+        id: `service_${index}`,
+        prod: `服务附加费项目${index + 1}`,
+        num: 1,
+        state: '待退款',
+        availableNum: index % 3 === 0 ? 0 : Math.floor(Math.random() * 10) + 1, // 模拟数据，每3个有一个为0
+      }),
+    );
+
+    if (!value) {
+      setDataSource(initData);
+      // 初始化时通知父组件，只选中可退款数量 > 0 的项
+      const validItems = initData.filter((item) => item.availableNum > 0);
+      const validKeys = validItems.map((item) => item.id);
+      notifyChange(initData, validKeys);
+      setSelectedRowKeys(validKeys);
+    }
+  }, []);
+
+  // 当外部 value 变化时更新
+  useEffect(() => {
+    if (value && value.length > 0) {
+      // 更新选中状态，只保留可退款数量 > 0 的项
+      setSelectedRowKeys((prev) =>
+        prev.filter((key) => {
+          const item = value.find((v) => v.id === key);
+          return item && item.availableNum > 0;
+        }),
+      );
+    }
+  }, [value]);
+
+  // 通知父组件数据变化（包含选中信息）
+  const notifyChange = (data: DataSourceType[], selected: React.Key[]) => {
+    // 只返回选中的项
+    const selectedData = data.filter((item) => selected.includes(item.id));
+    onChange?.(selectedData);
+  };
+
+  const handleNumChange = (id: React.Key, num: number | null) => {
+    const record = dataSource.find((item) => item.id === id);
+    if (!record) return;
+
+    // 如果可退款数量为0，不允许修改
+    if (record.availableNum <= 0) return;
+
+    const finalNum = num ?? 1;
+    // 不能超过可退款数量
+    const validNum = Math.min(finalNum, record.availableNum);
+
+    const newData = dataSource.map((item) =>
+      item.id === id ? { ...item, num: validNum } : item,
+    );
+    setDataSource(newData);
+
+    // 如果数量变为 0 或负数，取消选中
+    let newSelectedKeys = selectedRowKeys;
+    if (validNum <= 0) {
+      newSelectedKeys = selectedRowKeys.filter((key) => key !== id);
+      setSelectedRowKeys(newSelectedKeys);
+    }
+
+    notifyChange(newData, newSelectedKeys);
+  };
+
+  // 判断是否有错误
+  const isInvalid = (num: number | undefined | null): boolean => {
+    if (num === undefined || num === null) return true;
+    if (typeof num !== 'number') return true;
+    if (num <= 0) return true;
+    return false;
+  };
+
+  const columns = [
+    {
+      title: '服务项目',
+      dataIndex: 'prod',
+      key: 'prod',
+      width: '30%',
+      ellipsis: true,
+    },
+    {
+      title: '退款信息',
+      dataIndex: 'state',
+      key: 'state',
+      width: '20%',
+    },
+    {
+      title: '可退款数量',
+      dataIndex: 'availableNum',
+      key: 'availableNum',
+      width: '20%',
+    },
+    {
+      title: <span style={{ color: 'red' }}>* 退款数量</span>,
+      dataIndex: 'num',
+      key: 'num',
+      width: '30%',
+      render: (value: number, record: DataSourceType) => {
+        const hasError = isInvalid(value);
+        const isDisabled = record.availableNum <= 0;
+
+        return (
+          <InputNumber
+            min={1}
+            max={record.availableNum} // 最大值为可退款数量
+            value={value}
+            onChange={(val) => handleNumChange(record.id, val)}
+            disabled={isDisabled}
+            style={{
+              width: '100%',
+            }}
+            placeholder={isDisabled ? '不可退款' : '请输入退款数量'}
+            precision={0}
+          />
+        );
+      },
+    },
+  ];
+
+  // 行选择配置
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: (newSelectedRowKeys: React.Key[]) => {
+      setSelectedRowKeys(newSelectedRowKeys);
+      notifyChange(dataSource, newSelectedRowKeys);
+    },
+    getCheckboxProps: (record: DataSourceType) => ({
+      disabled: record.availableNum <= 0, // 可退款数量为 0 时禁用选中
+      name: record.prod,
+    }),
+  };
+
+  return (
+    <div>
+      <div
+        style={{
+          marginBottom: 8,
+          fontWeight: 500,
+          fontSize: 14,
+          color: '#000',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <span>服务附加费退款明细</span>
+        <span style={{ fontSize: 12, fontWeight: 'normal', color: '#666' }}>
+          已选择 {selectedRowKeys.length} 项
+        </span>
+      </div>
+      <Table
+        rowKey="id"
+        dataSource={dataSource}
+        columns={columns}
+        rowSelection={rowSelection}
+        size="small"
+        bordered
+        scroll={{ y: 300 }}
+      />
+    </div>
+  );
+};
+export default CreateSalesModal;

src/pages/trade/order/detail/index.tsx

@@ -1,7 +1,9 @@
 import { Tabs, type TabsProps } from 'antd';
 import React from 'react';
 import type { TradeOrderPageRespVO } from '@/services/trade/order';
+import { SalesTable } from '../../sales/list';
 import OrderInfo from './order-info';
+import SalesRefunds from './src/sales-refunds';
 
 const DetailCom: React.FC<{ data?: TradeOrderPageRespVO }> = (props) => {
   const items: TabsProps['items'] = [
@@ -20,6 +22,11 @@ const DetailCom: React.FC<{ data?: TradeOrderPageRespVO }> = (props) => {
       label: '商品配送',
       children: '商品配送',
     },
+    {
+      key: '4',
+      label: '售后与退款',
+      children: <SalesRefunds orderStatus={props.data?.orderStatus} />,
+    },
   ];
   return <Tabs defaultActiveKey="1" items={items} destroyOnHidden />;
 };

src/pages/trade/order/detail/order-info.tsx

@@ -39,12 +39,12 @@ const OrderDetail: React.FC<{ data?: TradeOrderPageRespVO }> = (props) => {
   return (
     <Space direction="vertical" size={24} style={{ width: '100%' }}>
       <BasicInfo data={detais} loading={loading} />
-      <ProdInfo data={detais?.items} />
+      <ProdInfo data={detais?.items} loading={loading} />
       {detais?.tradeServeInfo && (
         <ServiceInfo
           data={detais.tradeServeInfo}
           orderCategoryId={detais?.orderCategoryId}
-          id={detais?.id}
+          loading={loading}
         />
       )}
       {detais?.tradeExtendServeInfo && (

src/pages/trade/order/detail/src/info/config.tsx

@@ -23,7 +23,7 @@ const sharedOnCell = (_: DeptVO, index?: number) => {
 export const surchargeInfoColumns: ProColumns<DeptVO>[] = [
   {
     title: '服务附加费',
-    dataIndex: 'name',
+    dataIndex: 'serveExtFee',
     width: '33.33%',
     render: (_, record, index) => {
       if (index === 3) {

src/pages/trade/order/detail/src/info/prod-info.tsx

@@ -1,5 +1,5 @@
 import { ProCard } from '@ant-design/pro-components';
-import { Button, Card, Image, Modal, Space, Tag, Typography } from 'antd';
+import { Button, Card, Image, Modal, Space, Spin, Tag, Typography } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
 import AdvancedImageGallery from '@/components/AdvancedImageGallery';
 import DangerouslySetInnerHTML from '@/components/DangerouslySetInnerHTML';
@@ -42,7 +42,7 @@ const ProdInfo: React.FC<ItemConfig<Item[]>> = (props) => {
 
   return (
     <div className={styles['order-info']}>
-      <Card title="商品信息">
+      <Card title="商品信息" loading={props.loading}>
         {data?.map((item) => (
           <ProCard
             key={item.id}
@@ -175,14 +175,20 @@ const PhotoModal: React.FC<{
   item?: Item;
 }> = (props) => {
   const [photo, setPhoto] = useState<TradeOrderFastPhotoRespVo>();
+  const [loading, setLoading] = useState<boolean>(false);
   const { item } = props;
   console.log(item, 'item');
   const onPhoto = useCallback(async () => {
-    const res = await getfastPhoto({
+    try {
-      itemId: item?.id as number,
+      setLoading(true);
-      spuId: item?.spuId as number,
+      const res = await getfastPhoto({
-    });
+        itemId: item?.id as number,
-    setPhoto(res);
+        spuId: item?.spuId as number,
+      });
+      setPhoto(res);
+    } finally {
+      setLoading(false);
+    }
   }, [item]);
   useEffect(() => {
     if (props.open && item) {
@@ -198,53 +204,55 @@ const PhotoModal: React.FC<{
       footer={null}
       width={820}
     >
-      <div
+      <Spin spinning={loading}>
-        style={{
-          height: '480px',
-          width: '100%',
-          overflow: 'hidden',
-          display: 'flex',
-          justifyContent: 'space-between',
-          gap: '16px',
-        }}
-      >
-        <div className="left" style={{ width: '386px', height: '100%' }}>
-          <AdvancedImageGallery images={photo?.imgs?.split(',') || []} />
-        </div>
         <div
-          className="right"
+          style={{
-          style={{ height: '100%', overflow: 'auto', width: '386px' }}
+            height: '480px',
+            width: '100%',
+            overflow: 'hidden',
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: '16px',
+          }}
         >
-          <Title level={4}>{photo?.spuName}</Title>
+          <div className="left" style={{ width: '386px', height: '100%' }}>
-          <Paragraph>
+            <AdvancedImageGallery images={photo?.imgs?.split(',') || []} />
-            <Text type="secondary">{photo?.brief}</Text>
-          </Paragraph>
-          <div
-            style={{
-              marginBottom: '16px',
-              background: '#00000005',
-              padding: '8px',
-              borderRadius: '8px',
-              fontSize: '12px',
-            }}
-          >
-            <span>
-              当前页面为订单快照，包含订单创建时的商品描述和下单信息，买卖双方和平台在发生交易争议时，将作为判断依据。
-            </span>
           </div>
           <div
-            style={{
+            className="right"
-              marginBottom: '16px',
+            style={{ height: '100%', overflow: 'auto', width: '386px' }}
-              background: '#00000005',
-              padding: '8px',
-              borderRadius: '8px',
-            }}
           >
-            <strong>已选：{photo?.skuName}（已选的SKU规格）</strong>
+            <Title level={4}>{photo?.spuName}</Title>
+            <Paragraph>
+              <Text type="secondary">{photo?.brief}</Text>
+            </Paragraph>
+            <div
+              style={{
+                marginBottom: '16px',
+                background: '#00000005',
+                padding: '8px',
+                borderRadius: '8px',
+                fontSize: '12px',
+              }}
+            >
+              <span>
+                当前页面为订单快照，包含订单创建时的商品描述和下单信息，买卖双方和平台在发生交易争议时，将作为判断依据。
+              </span>
+            </div>
+            <div
+              style={{
+                marginBottom: '16px',
+                background: '#00000005',
+                padding: '8px',
+                borderRadius: '8px',
+              }}
+            >
+              <strong>已选：{photo?.skuName}（已选的SKU规格）</strong>
+            </div>
+            <DangerouslySetInnerHTML content={photo?.content} />
           </div>
-          <DangerouslySetInnerHTML content={photo?.content} />
         </div>
-      </div>
+      </Spin>
     </Modal>
   );
 };

src/pages/trade/order/detail/src/info/service-info.tsx

@@ -5,7 +5,13 @@ import ServicePetUI from './uis/pets/service';
 
 const ServiceInfo: React.FC<ItemConfig<TradeServeInfo>> = (props) => {
   const { data = {}, orderCategoryId, id } = props;
-  return <>{orderCategoryId === 1 && <ServicePetUI data={data} id={id} />}</>; //宠物服务ui
+  return (
+    <>
+      {orderCategoryId === 1 && (
+        <ServicePetUI data={data} id={id} loading={props.loading} />
+      )}
+    </>
+  );
 };
 
 export default React.memo(ServiceInfo);

src/pages/trade/order/detail/src/sales-refunds.tsx

@@ -0,0 +1,22 @@
+import { Button, Space, Typography } from 'antd';
+import React from 'react';
+import { SalesTable } from '@/pages/trade/sales/list';
+import CreateSalesModal from '../../components/createSalesModal';
+
+const { Title } = Typography;
+const SalesRefunds: React.FC<{ orderStatus?: number }> = (props) => {
+  return (
+    <>
+      <Space align="center" style={{ marginBottom: 16 }} size={16}>
+        <Title level={3} style={{ margin: 0 }}>
+          售后与退款
+        </Title>
+        <CreateSalesModal />
+      </Space>
+
+      <SalesTable orderStatus={props?.orderStatus} />
+    </>
+  );
+};
+
+export default React.memo(SalesRefunds);

src/pages/trade/order/list.tsx

@@ -67,7 +67,7 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
   ) => {
     const data = await getTradeOrderPage({
       ...params,
-      orderStatus,
+      orderStatus: props?.orderStatus ? props?.orderStatus : undefined,
       pageNo: params.current,
       pageSize: params.pageSize,
     });

src/pages/trade/sales/config.tsx

@@ -0,0 +1,157 @@
+import type { ProColumns } from '@ant-design/pro-components';
+import { Badge, Button, Image, Space, Tag, Typography } from 'antd';
+import type { TradeOrderPageRespVO } from '@/services/trade/order';
+
+const { Text, Paragraph } = Typography;
+export const baseOrderColumns: ProColumns<TradeOrderPageRespVO>[] = [
+  {
+    title: '售后服务单',
+    dataIndex: 'items',
+    hideInSearch: true,
+    ellipsis: true,
+    render: (_, record) => (
+      <Space direction="vertical">
+        <Badge status="error" text="等待退款" />
+        <div>
+          <Text type="secondary">售后类型：</Text>
+          <Text>{record?.payPrice || '-'}</Text>
+        </div>
+        <div>
+          <Text type="secondary">退款类型：</Text>
+          <Text>{record.payType || '-'}</Text>
+        </div>
+        <div>
+          <Text type="secondary">申请原因：</Text>
+          <Text>{record.financeStatus || '-'}</Text>
+        </div>
+        <div>
+          <Text type="secondary">申请人员：</Text>
+          <Text>{record.financeStatus || '-'}</Text>
+        </div>
+      </Space>
+    ),
+  },
+
+  {
+    title: '售后商品',
+    dataIndex: 'serveAddress',
+    hideInSearch: true,
+    ellipsis: true,
+    render: (_, record) => {
+      if (!record.items) {
+        return _;
+      }
+      return record.items.map((item, index) => (
+        <>
+          <div
+            style={{ width: '100%', display: 'flex', gap: '8px' }}
+            key={`${index}${Math.random()}`}
+          >
+            <Image src={item.picUrl} width={64} height={64} />
+            <div style={{ flex: '1', overflow: 'hidden' }}>
+              <Paragraph ellipsis style={{ width: '100%', marginBottom: 0 }}>
+                {item.spuName}测试商品名称测试商品名称测试商品名称测试商品名称
+              </Paragraph>
+              <div>{item.skuName}</div>
+              <div>
+                <Text type="secondary">申请数量：</Text>
+                <Text>{item.count || 0}</Text>
+              </div>
+            </div>
+          </div>
+          <Button size="small" style={{ marginTop: 10, textAlign: 'right' }}>
+            售后详情
+          </Button>
+        </>
+      ));
+    },
+  },
+  {
+    title: '申请信息',
+    dataIndex: 'price',
+    hideInSearch: true,
+    render: (_, record) => (
+      <Space direction="vertical">
+        <div>
+          <Text type="secondary">售后类型：</Text>
+          <Text>{record?.payPrice || '-'}</Text>
+        </div>
+        <div>
+          <Text type="secondary">退款类型：</Text>
+          <Text>{record.payType || '-'}</Text>
+        </div>
+        <div>
+          <Text type="secondary">申请原因：</Text>
+          <Text>{record.financeStatus || '-'}</Text>
+        </div>
+        <div>
+          <Text type="secondary">申请人员：</Text>
+          <Text>{record.financeStatus || '-'}</Text>
+        </div>
+      </Space>
+    ),
+  },
+  {
+    title: '退款信息',
+    dataIndex: 'merchantName',
+    hideInSearch: true,
+    render: (_, record) => (
+      <Space direction="vertical">
+        <Badge status="default" text="无退款" />
+        <div>
+          <Text type="secondary">退款金额：</Text>
+          <Text>{record?.payPrice || '-'}</Text>
+        </div>
+        <div>
+          <Text type="secondary">退款方式：</Text>
+          <Text>{record.payType || '-'}</Text>
+        </div>
+        <Space>
+          <Button size="small" type="primary">
+            重试退款
+          </Button>
+          <Button size="small" type="primary">
+            审核处理
+          </Button>
+          <Button size="small">转人工退款</Button>
+          <Button size="small">取消申请</Button>
+        </Space>
+      </Space>
+    ),
+  },
+  {
+    title: '申请人姓名、手机或ID',
+    dataIndex: 'userSearch',
+    hideInTable: true,
+  },
+  {
+    title: '售后类型',
+    dataIndex: 'orderCategoryId',
+    valueType: 'select',
+    hideInTable: true,
+  },
+  {
+    title: '退款类型',
+    dataIndex: 'orderTerminal',
+    valueType: 'select',
+    hideInTable: true,
+  },
+  {
+    title: '退款状态',
+    dataIndex: 'financeStatus',
+    valueType: 'select',
+    hideInTable: true,
+  },
+  {
+    title: '申请时间',
+    dataIndex: 'createTime',
+    valueType: 'dateRange',
+    hideInTable: true,
+  },
+  {
+    title: '退款时间',
+    dataIndex: 'subTime',
+    valueType: 'dateRange',
+    hideInTable: true,
+  },
+];

src/pages/trade/sales/index.module.less

@@ -0,0 +1,13 @@
+.sales {
+  :global {
+    .ant-pro-card-header {
+      background: rgba(0, 0, 0, 0.02);
+      min-height: 41px;
+    }
+    .ant-pro-card-col {
+      flex: 1 auto;
+      overflow: auto;
+    }
+  }
+}
+ 

src/pages/trade/sales/index.tsx

@@ -1,6 +1,24 @@
 // 售后列表
-const TradeSales: React.FC = () => {
+import type { TabsProps } from 'antd';
-  return 111;
+import { Tabs } from 'antd';
+import React from 'react';
+import { SalesStatusLableMap } from '@/constants/trade';
+import SalesListItem from './list';
+
+const TradeSalesList: React.FC = () => {
+  const items: TabsProps['items'] = Object.entries(SalesStatusLableMap).map(
+    ([value, label]) => ({
+      key: value,
+      label: label,
+      children: <SalesListItem orderStatus={Number(value)} />,
+    }),
+  );
+
+  return (
+    <div className="page-container">
+      <Tabs defaultActiveKey="1" items={items} destroyOnHidden />
+    </div>
+  );
 };
 
-export default TradeSales;
+export default TradeSalesList;

src/pages/trade/sales/list.tsx

@@ -0,0 +1,133 @@
+import { type ActionType, ProCard } from '@ant-design/pro-components';
+import { Button, Input, Space, Statistic } from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import EnhancedProTable from '@/components/EnhancedProTable';
+import { baseOrderColumns } from './config';
+
+const { Search } = Input;
+
+import { DownOutlined, UpOutlined, UserOutlined } from '@ant-design/icons';
+
+import {
+  getTradeOrderPage,
+  getTradeSummary,
+  type TradeOrderPageRespVO,
+  type TradeReq,
+  type TradeSummaryRespVO,
+} from '@/services/trade/order';
+
+const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
+  const { orderStatus } = props;
+  const tableRef = useRef<ActionType>(null);
+  const [isShowTotal, setIsShowTotal] = useState<boolean>(false);
+  const [summary, setSummary] = useState<TradeSummaryRespVO>();
+  const fetchSummary = async () => {
+    const res = await getTradeSummary();
+    setSummary(res);
+  };
+  useEffect(() => {
+    fetchSummary();
+  }, []);
+
+  const handleIsTotal = useCallback(() => {
+    setIsShowTotal(!isShowTotal);
+  }, [isShowTotal]);
+
+  const handleSearch = useCallback((value: string) => {
+    console.log('搜索', value);
+    tableRef.current?.reload();
+  }, []);
+  return (
+    <>
+      <Space
+        style={{
+          padding: '18px',
+          background: '#fff',
+          marginBottom: 16,
+        }}
+      >
+        <Search
+          placeholder="输入售后单号/关联订单号搜索"
+          enterButton
+          onSearch={handleSearch}
+          style={{ width: 300 }}
+        />
+        <Button
+          icon={isShowTotal ? <DownOutlined /> : <UpOutlined />}
+          onClick={handleIsTotal}
+        >
+          统计
+        </Button>
+      </Space>
+      {isShowTotal && (
+        <ProCard.Group direction="row" style={{ marginBottom: 18 }}>
+          <ProCard layout="center" style={{ background: '#f5f5f5' }}>
+            <Statistic
+              title="售后单数量"
+              value={summary?.orderCount}
+              precision={2}
+            />
+          </ProCard>
+          <ProCard layout="center" style={{ background: '#f5f5f5' }}>
+            <Statistic
+              title="待退款金额"
+              value={summary?.payPrice}
+              precision={2}
+            />
+          </ProCard>
+          <ProCard layout="center" style={{ background: '#f5f5f5' }}>
+            <Statistic
+              title="累计退款金额"
+              value={summary?.livePrice}
+              precision={2}
+            />
+          </ProCard>
+        </ProCard.Group>
+      )}
+      <SalesTable orderStatus={orderStatus} search={true} />
+    </>
+  );
+};
+
+export const SalesTable = (props: {
+  orderStatus?: number;
+  search?: boolean;
+}) => {
+  const tableRef = useRef<ActionType>(null);
+  const onFetch = async (
+    params: TradeReq & {
+      pageSize: number;
+      current: number;
+    },
+  ) => {
+    const data = await getTradeOrderPage({
+      ...params,
+      orderStatus: props?.orderStatus ? props?.orderStatus : undefined,
+      pageNo: params.current,
+      pageSize: params.pageSize,
+    });
+
+    return {
+      data: data.list,
+      success: true,
+      total: data.total,
+    };
+  };
+
+  const tabelConfig = {};
+
+  return (
+    <EnhancedProTable<TradeOrderPageRespVO>
+      ref={tableRef}
+      columns={baseOrderColumns}
+      request={onFetch}
+      headerTitle="售后列表"
+      showIndex={false}
+      showSelection={false}
+      search={props.search ? { defaultCollapsed: true } : false}
+    />
+  );
+};
+
+export default React.memo(OrderListItem);

src/requestErrorConfig.ts

@@ -100,9 +100,6 @@ export const errorConfig: RequestConfig = {
     },
     // 错误接收及处理
     errorHandler: async (error: any, opts: any) => {
-      if (opts?.skipErrorHandler) throw error;
-      // 我们的 errorThrower 抛出的错误。
-      console.log('errorHandler', error);
       const errorInfo: ResponseStructure | undefined = error.info;
       if (error.name === 'BizError') {
         if (errorInfo) {
@@ -118,6 +115,7 @@ export const errorConfig: RequestConfig = {
       } else {
         message.error(`发送请求时出了点问题:${error.msg}`);
       }
+      throw error;
     },
   },
 

src/utils/menuUtils.tsx

@@ -116,3 +116,56 @@ export const loopMenuItem = (menus: MenuVO[], pId: number | string): any[] => {
 //     return currentPath;
 //   }
 // }
+// src/utils/route.ts
+import { lazy } from 'react';
+
+export interface RouteItem {
+  id: number;
+  parentId: number;
+  name: string;
+  path: string;
+  component: string | null;
+  componentName: string;
+  icon: string;
+  visible: boolean;
+  keepAlive: boolean;
+  alwaysShow: boolean;
+  children: RouteItem[] | null;
+}
+
+/**
+ * 转换后端路由数据为 Ant Design Pro 路由格式
+ */
+export function transformRoutes(routes: MenuVO[]): any[] {
+  return routes
+    .filter((route) => route.visible) // 只显示可见路由
+    .map((route) => {
+      const routeConfig: any = {
+        path: route.path,
+        name: route.name,
+        icon: route.icon || undefined,
+      };
+
+      // 处理组件
+      if (route.component) {
+        routeConfig.component = lazy(
+          () =>
+            import(`@/pages/${route.component}`).catch(
+              () => import('@/pages/404'),
+            ), // 组件不存在时显示404
+        );
+      }
+
+      // 处理子路由
+      if (route.children && route.children.length > 0) {
+        routeConfig.routes = transformRoutes(route.children);
+      }
+
+      // 隐藏菜单但保留路由
+      if (!route.visible) {
+        routeConfig.hideInMenu = true;
+      }
+
+      return routeConfig;
+    });
+}