💥 feat(compiler): 添加选择自定义代码模式不显示响应配置。

src/pages/User/Login/index.tsx

@@ -1,26 +1,19 @@
-import {
-  CreditCardOutlined,
-  LockOutlined,
-  UserOutlined,
-} from '@ant-design/icons';
+import { getImageCaptcha, login, otpLogin } from '@/services/ant-design-pro/login';
+import { CreditCardOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
 import {
   LoginFormPage,
   ProConfigProvider,
   ProFormCheckbox,
-
   ProFormInstance,
-
   ProFormText,
 } from '@ant-design/pro-components';
-import { flushSync } from 'react-dom';
-import { FormattedMessage, useIntl, useModel } from '@umijs/max';
-import { message, Tabs } from 'antd';
+import { FormattedMessage, history, useIntl, useModel } from '@umijs/max';
+import { message, Spin, Tabs } from 'antd';
 import { createStyles } from 'antd-style';
 import React, { useEffect, useRef, useState } from 'react';
-import { getImageCaptcha, login, otpLogin } from '@/services/ant-design-pro/login';
-import { history } from '@umijs/max';
+import { flushSync } from 'react-dom';
 
-const useStyles = createStyles(({ }) => {
+const useStyles = createStyles(({}) => {
   return {
     container: {
       display: 'flex',
@@ -44,42 +37,49 @@ const Login: React.FC = () => {
   const [currentLoginStep, setCurrentLoginStep] = useState<string>('login');
   const [captchaUrl, setCaptchaUrl] = useState<string>('');
   const [captcha, setCaptcha] = useState<Captcha>();
+  const [captchaSpinning, setCaptchaSpinning] = useState(false);
   /** 用户名密码登录token */
   const [uplToken, setUplToken] = useState<string>();
 
   /** 处理刷新验证码 */
   const handleRefreshCaptcha = async () => {
-    setFormLoading(true)
-    await getImageCaptcha().then((resp) => {
-      if (resp.success) {
-        setCaptcha(resp.data as Captcha)
-        setCaptchaUrl("data:image/gif;base64," + resp.data.img)
-      }
-    }).catch((err) => {
-      console.log(err)
-    });
-    setFormLoading(false)
-  }
+    setFormLoading(true);
+    setCaptchaSpinning(true);
+    await getImageCaptcha()
+      .then((resp) => {
+        if (resp.success) {
+          setCaptcha(resp.data as Captcha);
+          setCaptchaUrl('data:image/gif;base64,' + resp.data.img);
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+    setCaptchaSpinning(false);
+    setFormLoading(false);
+  };
 
   /** 处理用户名密码登录 */
   const handleUsernameAndPasswordLogin = async () => {
-    console.log(formRef.current)
+    console.log(formRef.current);
     const param: API.LoginParams = {
       username: formRef.current?.getFieldValue('username'),
       password: formRef.current?.getFieldValue('password'),
       captcha: formRef.current?.getFieldValue('captcha'),
       uuid: captcha?.uuid,
-    }
-    await login(param).then((resp) => {
-      if (resp.success) {
-        localStorage.setItem('Authorization', resp.data)
-        setCurrentLoginStep('otpLogin')
-        setUplToken(resp.data)
-      }
-    }).catch((err) => {
-      console.log(err)
-    })
-  }
+    };
+    await login(param)
+      .then((resp) => {
+        if (resp.success) {
+          localStorage.setItem('Authorization', resp.data);
+          setCurrentLoginStep('otpLogin');
+          setUplToken(resp.data);
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
 
   /** 获取UserInfo */
   const fetchUserInfo = async () => {
@@ -97,51 +97,52 @@ const Login: React.FC = () => {
   /** 处理OTP登录 */
   const handleOtpLogin = async () => {
     if (captcha === undefined || captcha === null) {
-      setCurrentLoginStep('login')
+      setCurrentLoginStep('login');
       return;
     }
     const param: API.otpLoginParam = {
       username: formRef.current?.getFieldValue('username'),
       code: formRef.current?.getFieldValue('otpCaptcha'),
       uplToken: uplToken,
-    }
-    return await otpLogin(param).then((resp) => {
-      if (resp.success) {
-        localStorage.setItem('token', resp.data)
-      } else {
-        if (resp.errCode === '100007') {
-          setCurrentLoginStep('login')
+    };
+    return await otpLogin(param)
+      .then((resp) => {
+        if (resp.success) {
+          localStorage.setItem('token', resp.data);
+        } else {
+          if (resp.errCode === '100007') {
+            setCurrentLoginStep('login');
+          }
         }
-      }
-      return resp.success
-    }).catch((err) => {
-      console.log(err)
-      return false;
-    })
-
-  }
+        return resp.success;
+      })
+      .catch((err) => {
+        console.log(err);
+        return false;
+      });
+  };
 
   /** 处理登录 */
   const handleFinish = async () => {
-    setFormLoading(true)
+    setFormLoading(true);
     if (currentLoginStep === 'login') {
-      await handleUsernameAndPasswordLogin()
+      await handleUsernameAndPasswordLogin();
     } else if (currentLoginStep === 'otpLogin') {
-      const isSuccess = await handleOtpLogin()
+      const isSuccess = await handleOtpLogin();
       if (isSuccess) {
         await fetchUserInfo();
         const urlParams = new URL(window.location.href).searchParams;
         history.push(urlParams.get('redirect') || '/');
       }
     } else {
-      message.error('不支持登录方式!')
+      message.error('不支持登录方式!');
     }
-    setFormLoading(false)
-  }
+    setFormLoading(false);
+  };
 
   /** 挂载处理逻辑 */
   useEffect(() => {
-    handleRefreshCaptcha()
+    handleRefreshCaptcha();
   }, []);
 
   return (
@@ -232,7 +233,15 @@ const Login: React.FC = () => {
                   <ProFormText
                     fieldProps={{
                       size: 'large',
-                      addonAfter: <img src={captchaUrl} onClick={handleRefreshCaptcha} style={{ minWidth: '100px' }} />,
+                      addonAfter: (
+                        <Spin spinning={captchaSpinning}>
+                          <img
+                            src={captchaUrl}
+                            onClick={handleRefreshCaptcha}
+                            style={{ minWidth: '90px' }}
+                          />
+                        </Spin>
+                      ),
                       prefix: <CreditCardOutlined style={{ marginRight: '5px' }} />,
                     }}
                     name="captcha"
@@ -267,7 +276,6 @@ const Login: React.FC = () => {
             {currentLoginStep === 'otpLogin' && (
               <>
                 <ProFormText
-                  // label="OTP验证码"
                   fieldProps={{
                     size: 'large',
                     prefix: <CreditCardOutlined style={{ marginRight: '5px' }} />,

src/pages/Welcome.tsx

@@ -114,7 +114,7 @@ const Welcome: React.FC = () => {
               color: token.colorTextHeading,
             }}
           >
-            欢迎使用 Ant Design Pro
+            欢迎使用 惠融数科金融云平台 开放平台管理系统
           </div>
           <p
             style={{

src/pages/egress/endpoint/table/index.tsx

@@ -1,13 +1,13 @@
+import { ProTable } from '@ant-design/pro-components';
+import { PageContainer } from '@ant-design/pro-layout';
 import React, { useRef } from 'react';
 import { history } from 'umi';
-import { PageContainer } from '@ant-design/pro-layout';
-import { ProTable } from '@ant-design/pro-components';
 
-import type { ProColumns, ActionType } from '@ant-design/pro-components';
 import { pageQueryEgressApiEndpoint } from '@/services/op-admin/gateway/egress';
+import { PlusOutlined } from '@ant-design/icons';
+import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { Button, Tag } from 'antd';
 import CreateEndpointFormModal from './component/CreateEndpointModal';
-import { PlusOutlined } from '@ant-design/icons';
 /**
  * @author bianlanzhou
  * @since 2024-10-25
@@ -38,9 +38,8 @@ const EgressApiEndpointTable: React.FC = () => {
       dataIndex: 'apiType',
       search: false,
       valueEnum: {
-        customize: <Tag color="orange">自定义</Tag>,
-        config: <Tag color="geekblue">配置化</Tag>
-      }
+        loan: <Tag color="orange">助贷API</Tag>,
+      },
     },
     {
       title: '创建时间',
@@ -57,12 +56,7 @@ const EgressApiEndpointTable: React.FC = () => {
       valueType: 'option',
       width: '10%',
       render: (_, record) => [
-        <a
-          key="view"
-          onClick={() => {
-
-          }}
-        >
+        <a key="view" onClick={() => {}}>
           查看
         </a>,
         <a
@@ -72,15 +66,15 @@ const EgressApiEndpointTable: React.FC = () => {
               {
                 pathname: '/ui/egress/loan-integration',
               },
-              { id: record.apiId, from: '/ui/egress/endpoint' }
-            )
+              { id: record.apiId, from: '/ui/egress/endpoint' },
+            );
           }}
         >
           编辑
         </a>,
       ],
     },
-  ]
+  ];
   return (
     <PageContainer
       header={{
@@ -106,7 +100,7 @@ const EgressApiEndpointTable: React.FC = () => {
           <CreateEndpointFormModal
             key="create"
             trigger={
-              <Button key="create" type="primary" onClick={() => { }} icon={<PlusOutlined />}>
+              <Button key="create" type="primary" onClick={() => {}} icon={<PlusOutlined />}>
                 创建API通道
               </Button>
             }
@@ -115,9 +109,9 @@ const EgressApiEndpointTable: React.FC = () => {
             }}
           />,
         ]}
-        headerTitle='通道列表'
+        headerTitle="通道列表"
       />
     </PageContainer>
   );
-}
-export default EgressApiEndpointTable;
+};
+export default EgressApiEndpointTable;

src/pages/egress/loan/integration/index.tsx

@@ -1,7 +1,20 @@
 import HttpClient from '@/components/HttpUtil';
-import { loanApiIntegration, queryApiLoan, queryEgressApiEndpoint } from '@/services/op-admin/gateway/egress';
+import {
+  loanApiIntegration,
+  queryApiLoan,
+  queryEgressApiEndpoint,
+} from '@/services/op-admin/gateway/egress';
 import { queryMerchant } from '@/services/op-admin/gateway/merchant';
-import { FooterToolbar, PageContainer, ProCard, ProForm, ProFormInstance, ProFormSelect, ProFormTextArea, StepsForm } from '@ant-design/pro-components';
+import {
+  FooterToolbar,
+  PageContainer,
+  ProCard,
+  ProForm,
+  ProFormInstance,
+  ProFormSelect,
+  ProFormTextArea,
+  StepsForm,
+} from '@ant-design/pro-components';
 import { useLocation } from '@umijs/max';
 import { Button, message, Popconfirm, Spin } from 'antd';
 import React, { useRef, useState } from 'react';
@@ -22,104 +35,108 @@ const LoanIntegration: React.FC = () => {
   /** 页面loading */
   const [pageLoading, setPageLoading] = useState<boolean>(false);
   /** 撞库通道集成方式 */
-  const [ciEndpointIntegrationMode, setCiEndpointIntegrationMode] = useState('customize')
+  const [ciEndpointIntegrationMode, setCiEndpointIntegrationMode] = useState('customize');
   /** 注册通道集成方式 */
-  const [apyEndpointIntegrationMode, setApyEndpointIntegrationMode] = useState('customize')
+  const [apyEndpointIntegrationMode, setApyEndpointIntegrationMode] = useState('customize');
   /** 撞库通道ID */
-  const [checkintoEndpointId, setCheckintoEndpointId] = useState<string>('')
+  const [checkintoEndpointId, setCheckintoEndpointId] = useState<string>('');
   /** 申请注册ID */
-  const [applyEndpointId, setApplyintoEndpointId] = useState<string>('')
+  const [applyEndpointId, setApplyintoEndpointId] = useState<string>('');
   /** 查询撞库通道 */
   const handleQueryCheckintoEndpoint = () => {
     return queryEgressApiEndpoint({
       endpointCode: 'checkinto',
-      apiId: (location.state as { id: string, from: string }).id
-    }).then((resp) => {
-      if (resp.data && resp.data.length > 0) {
-        let integrationMode = resp.data[0].integrationMode;
-        setCiEndpointIntegrationMode(integrationMode)
-        setCheckintoEndpointId(resp.data[0].id)
-        if (integrationMode === 'guide') {
-          return {
-            ...resp.data[0],
-            ...JSON.parse(resp.data[0].requestConfig)
+      apiId: (location.state as { id: string; from: string }).id,
+    })
+      .then((resp) => {
+        if (resp.data && resp.data.length > 0) {
+          let integrationMode = resp.data[0].integrationMode;
+          setCiEndpointIntegrationMode(integrationMode);
+          setCheckintoEndpointId(resp.data[0].id);
+          if (integrationMode === 'guide') {
+            return {
+              ...resp.data[0],
+              ...JSON.parse(resp.data[0].requestConfig),
+            };
+          } else {
+            return {
+              ...resp.data[0],
+              ...resp.data[0].requestConfig,
+            };
           }
         } else {
+          //默认值
+          setCiEndpointIntegrationMode('customize');
           return {
-            ...resp.data[0],
-            ...resp.data[0].requestConfig
-          }
-        }
-      } else {
-        //默认值
-        setCiEndpointIntegrationMode('customize');
-        return {
-          integrationMode: 'customize'
+            integrationMode: 'customize',
+          };
         }
-      }
-    }).catch();
-  }
+      })
+      .catch();
+  };
 
   /** 查询申请通道 */
   const handleQueryApplyEndpoint = () => {
     return queryEgressApiEndpoint({
       endpointCode: 'apply',
-      apiId: (location.state as { id: string, from: string }).id
-    }).then((resp) => {
-      if (resp.data && resp.data.length > 0) {
-        let integrationMode = resp.data[0].integrationMode;
-        setApyEndpointIntegrationMode(resp.data[0].integrationMode)
-        setApplyintoEndpointId(resp.data[0].id)
-        if (integrationMode === 'guide') {
-          return {
-            ...resp.data[0],
-            ...JSON.parse(resp.data[0].requestConfig)
+      apiId: (location.state as { id: string; from: string }).id,
+    })
+      .then((resp) => {
+        if (resp.data && resp.data.length > 0) {
+          let integrationMode = resp.data[0].integrationMode;
+          setApyEndpointIntegrationMode(resp.data[0].integrationMode);
+          setApplyintoEndpointId(resp.data[0].id);
+          if (integrationMode === 'guide') {
+            return {
+              ...resp.data[0],
+              ...JSON.parse(resp.data[0].requestConfig),
+            };
+          } else {
+            return {
+              ...resp.data[0],
+              ...resp.data[0].requestConfig,
+            };
           }
         } else {
+          setApyEndpointIntegrationMode('customize');
           return {
-            ...resp.data[0],
-            ...resp.data[0].requestConfig
-          }
-        }
-      } else {
-        setApyEndpointIntegrationMode('customize');
-        return {
-          integrationMode: 'customize'
+            integrationMode: 'customize',
+          };
         }
-      }
-    }).catch();
-  }
+      })
+      .catch();
+  };
 
   /** 查询助贷API */
   const handleQueryApiLoan = () => {
-    return queryApiLoan({ apiId: (location.state as { id: string, from: string }).id }).then(
-      (resp) => {
+    return queryApiLoan({ apiId: (location.state as { id: string; from: string }).id })
+      .then((resp) => {
         if (resp.data) {
           return resp.data;
         }
-        return {}
-      }
-    ).catch();
-  }
+        return {};
+      })
+      .catch();
+  };
 
   /** 处理查询商户信息 */
   const handleQueryMerchant = () => {
-    return queryMerchant().then((resp) => {
-      if (resp.success) {
-        return resp.data
-      }
-      message.error('查询商户信息失败!')
-    }).catch(
-      (err) => {
-        console.log(err)
-      }
-    )
-  }
+    return queryMerchant()
+      .then((resp) => {
+        if (resp.success) {
+          return resp.data;
+        }
+        message.error('查询商户信息失败!');
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
 
   /** 处理通道formData */
   const handleEndpointFormData = (endpointId: string, formData: any) => {
-    const locationStateData = location.state as { id: string, from: string };
-    let requestConfigStr = "";
+    const locationStateData = location.state as { id: string; from: string };
+    let requestConfigStr = '';
     if (formData.integrationMode === 'guide') {
       const requestConfigJson = {
         url: formData.url,
@@ -128,7 +145,7 @@ const LoanIntegration: React.FC = () => {
         path: formData.path,
         query: formData.query,
         body: formData.body,
-      }
+      };
       requestConfigStr = JSON.stringify(requestConfigJson);
     } else {
       requestConfigStr = formData.requestConfig;
@@ -140,7 +157,7 @@ const LoanIntegration: React.FC = () => {
       requestConfig: requestConfigStr,
       responseConfig: formData.responseConfig,
     };
-  }
+  };
 
   return (
     <PageContainer
@@ -148,38 +165,37 @@ const LoanIntegration: React.FC = () => {
         title: '',
       }}
     >
-      <Spin spinning={pageLoading} >
+      <Spin spinning={pageLoading}>
         <ProForm
           formRef={mainFormRef}
-          name='mainForm'
+          name="mainForm"
           submitter={{
             render: () => {
-              return (
-                <div></div>
-              );
+              return <div></div>;
             },
           }}
           request={handleQueryApiLoan}
         >
           <ProCard>
-            <ProForm.Group >
+            <ProForm.Group>
               <ProFormSelect
                 width="md"
                 name="merchantId"
                 label="商户名称"
                 placeholder="请选择商户名称"
                 request={handleQueryMerchant}
-                fieldProps={
-                  {
-                    fieldNames: {
-                      label: 'merchantName',
-                      value: 'id'
-                    }
-                  }
-                }
+                fieldProps={{
+                  fieldNames: {
+                    label: 'merchantName',
+                    value: 'id',
+                  },
+                }}
                 required
               />
-              <ProFormSelect width="md" name="integrationSystem" label="集成系统"
+              <ProFormSelect
+                width="md"
+                name="integrationSystem"
+                label="集成系统"
                 valueEnum={{
                   1: '我方通用API',
                   2: '合作方CRM',
@@ -218,33 +234,27 @@ const LoanIntegration: React.FC = () => {
         </ProForm>
         <ProCard style={{ marginTop: '10px' }}>
           <StepsForm
-            formProps={
-              {
-                initialValues: {
-                  contentType: 'raw'
-                }
-              }
-            }
+            formProps={{
+              initialValues: {
+                contentType: 'raw',
+              },
+            }}
             submitter={{
               render: (props) => {
                 if (props.step === 0) {
                   return (
-                    <FooterToolbar >
+                    <FooterToolbar>
                       <Popconfirm
                         title="确认返回列表页?"
                         okText="确定"
                         cancelText="取消"
                         onConfirm={() => {
-                          history.push(
-                            {
-                              pathname: (location.state as { id: string, from: string }).from,
-                            },
-                          )
+                          history.push({
+                            pathname: (location.state as { id: string; from: string }).from,
+                          });
                         }}
                       >
-                        <Button>
-                          返回
-                        </Button>
+                        <Button>返回</Button>
                       </Popconfirm>
                       <Button type="primary" onClick={() => props.onSubmit?.()}>
                         下一步
@@ -254,7 +264,7 @@ const LoanIntegration: React.FC = () => {
                 }
 
                 return (
-                  <FooterToolbar >
+                  <FooterToolbar>
                     <Button key="gotoOne" onClick={() => props.onPre?.()}>
                       上一步
                     </Button>
@@ -264,10 +274,7 @@ const LoanIntegration: React.FC = () => {
                       cancelText="取消"
                       onConfirm={() => props.onSubmit?.()}
                     >
-                      <Button
-                        type="primary"
-                        key="submit"
-                      >
+                      <Button type="primary" key="submit">
                         提交
                       </Button>
                     </Popconfirm>
@@ -286,14 +293,16 @@ const LoanIntegration: React.FC = () => {
                 return true;
               }}
             >
-              <ProCard title='通道配置' bordered >
-                <ProFormSelect<string> name="integrationMode" placeholder="请选择配置方式"
+              <ProCard title="通道配置" bordered>
+                <ProFormSelect<string>
+                  name="integrationMode"
+                  placeholder="请选择配置方式"
                   valueEnum={{
                     customize: '自定义代码方式',
                     guide: '向导配置方式',
                   }}
-                  label='集成方式'
-                  width='sm'
+                  label="集成方式"
+                  width="sm"
                   rules={[
                     {
                       required: true,
@@ -301,44 +310,52 @@ const LoanIntegration: React.FC = () => {
                     },
                   ]}
                   onChange={(value) => {
-                    setCiEndpointIntegrationMode(value)
+                    setCiEndpointIntegrationMode(value);
                   }}
                 />
               </ProCard>
-              <ProCard title='请求配置' bordered style={{ marginTop: '5px' }}>
-                {ciEndpointIntegrationMode === "customize" ? <div style={{ width: '85vw' }}>
-                  <ProFormTextArea
-                    label="请求配置参数"
-                    rules={[
-                      {
-                        required: true,
-                        message: '请填写请求配置参数',
-                      },
-                    ]}
-                    name="requestConfig"
-                    fieldProps={{
-                      rows: 8,
-                    }}
-                  />
-                </div> : <HttpClient />}
-              </ProCard>
-              <ProCard title='响应配置' bordered style={{ marginTop: '5px' }}>
-                <div style={{ width: '85vw' }}>
-                  <ProFormTextArea
-                    label="响应配置参数"
-                    rules={[
-                      {
-                        required: true,
-                        message: '请填写响应配置参数',
-                      },
-                    ]}
-                    name="responseConfig"
-                    fieldProps={{
-                      rows: 8,
-                    }}
-                  />
-                </div>
+              <ProCard title="请求配置" bordered style={{ marginTop: '5px' }}>
+                {ciEndpointIntegrationMode === 'customize' ? (
+                  <div style={{ width: '85vw' }}>
+                    <ProFormTextArea
+                      label="请求配置参数"
+                      rules={[
+                        {
+                          required: true,
+                          message: '请填写请求配置参数',
+                        },
+                      ]}
+                      name="requestConfig"
+                      fieldProps={{
+                        rows: 8,
+                      }}
+                    />
+                  </div>
+                ) : (
+                  <HttpClient />
+                )}
               </ProCard>
+              {ciEndpointIntegrationMode === 'customize' ? (
+                <div />
+              ) : (
+                <ProCard title="响应配置" bordered style={{ marginTop: '5px' }}>
+                  <div style={{ width: '85vw' }}>
+                    <ProFormTextArea
+                      label="响应配置参数"
+                      rules={[
+                        {
+                          required: true,
+                          message: '请填写响应配置参数',
+                        },
+                      ]}
+                      name="responseConfig"
+                      fieldProps={{
+                        rows: 8,
+                      }}
+                    />
+                  </div>
+                </ProCard>
+              )}
             </StepsForm.StepForm>
 
             {/* 分界线 */}
@@ -350,44 +367,44 @@ const LoanIntegration: React.FC = () => {
               request={handleQueryApplyEndpoint}
               grid
               onFinish={async (formData) => {
-                setPageLoading(true)
-                let locationStateData = location.state as { id: string, from: string };
+                setPageLoading(true);
+                let locationStateData = location.state as { id: string; from: string };
                 let applyFormData = handleEndpointFormData(applyEndpointId, formData);
                 loanApiIntegration({
                   apiId: locationStateData.id,
                   apiLoanInfo: mainFormRef.current?.getFieldFormatValueObject?.() as ApiLoan,
                   checkinto: checkIntoFormData,
                   apply: applyFormData,
-                }).then((resp) => {
-                  if (resp.success) {
-                    let toPathname = '/ui/egress/endpoint';
-                    if (locationStateData.from === 'api') {
-                      toPathname = '/ui/egress/api';
-                    }
-                    message.success('创建成功!')
-                    history.push(
-                      {
+                })
+                  .then((resp) => {
+                    if (resp.success) {
+                      let toPathname = '/ui/egress/endpoint';
+                      if (locationStateData.from === 'api') {
+                        toPathname = '/ui/egress/api';
+                      }
+                      message.success('创建成功!');
+                      history.push({
                         pathname: toPathname,
-                      },
-                    )
-                  }
-                }).catch(
-                  (err) => {
-                    setPageLoading(false)
-                    console.log(err)
-                  }
-                )
+                      });
+                    }
+                  })
+                  .catch((err) => {
+                    setPageLoading(false);
+                    console.log(err);
+                  });
                 return false;
               }}
             >
-              <ProCard title='通道配置' bordered>
-                <ProFormSelect<string> name="integrationMode" placeholder="请选择配置方式"
+              <ProCard title="通道配置" bordered>
+                <ProFormSelect<string>
+                  name="integrationMode"
+                  placeholder="请选择配置方式"
                   valueEnum={{
                     customize: '自定义代码方式',
                     guide: '向导配置方式',
                   }}
-                  label='集成方式'
-                  width='sm'
+                  label="集成方式"
+                  width="sm"
                   rules={[
                     {
                       required: true,
@@ -395,50 +412,57 @@ const LoanIntegration: React.FC = () => {
                     },
                   ]}
                   onChange={(value) => {
-                    setApyEndpointIntegrationMode(value)
+                    setApyEndpointIntegrationMode(value);
                   }}
                 />
               </ProCard>
-              <ProCard title='请求配置' bordered style={{ marginTop: '5px' }}>
-                {apyEndpointIntegrationMode === "customize" ? <div style={{ width: '85vw' }}>
-                  <ProFormTextArea
-                    label="请求配置参数"
-                    rules={[
-                      {
-                        required: true,
-                        message: '请填写请求配置参数',
-                      },
-                    ]}
-                    name="requestConfig"
-                    fieldProps={{
-                      rows: 8,
-                    }}
-                  />
-                </div> : <HttpClient />}
-
-              </ProCard>
-              <ProCard title='响应配置' bordered style={{ marginTop: '5px' }}>
-                <div style={{ width: '85vw' }}>
-                  <ProFormTextArea
-                    label="响应配置参数"
-                    rules={[
-                      {
-                        required: true,
-                        message: '请填写响应配置参数',
-                      },
-                    ]}
-                    name="responseConfig"
-                    fieldProps={{
-                      rows: 8,
-                    }}
-                  />
-                </div>
+              <ProCard title="请求配置" bordered style={{ marginTop: '5px' }}>
+                {apyEndpointIntegrationMode === 'customize' ? (
+                  <div style={{ width: '85vw' }}>
+                    <ProFormTextArea
+                      label="请求配置参数"
+                      rules={[
+                        {
+                          required: true,
+                          message: '请填写请求配置参数',
+                        },
+                      ]}
+                      name="requestConfig"
+                      fieldProps={{
+                        rows: 8,
+                      }}
+                    />
+                  </div>
+                ) : (
+                  <HttpClient />
+                )}
               </ProCard>
+              {ciEndpointIntegrationMode === 'customize' ? (
+                <div />
+              ) : (
+                <ProCard title="响应配置" bordered style={{ marginTop: '5px' }}>
+                  <div style={{ width: '85vw' }}>
+                    <ProFormTextArea
+                      label="响应配置参数"
+                      rules={[
+                        {
+                          required: true,
+                          message: '请填写响应配置参数',
+                        },
+                      ]}
+                      name="responseConfig"
+                      fieldProps={{
+                        rows: 8,
+                      }}
+                    />
+                  </div>
+                </ProCard>
+              )}
             </StepsForm.StepForm>
           </StepsForm>
         </ProCard>
       </Spin>
-    </PageContainer >
+    </PageContainer>
   );
-}
-export default LoanIntegration;
+};
+export default LoanIntegration;