umi-request 替换为 axios

src/pages/setting/appModal.tsx

@@ -23,9 +23,10 @@ const AppModal = ({
       payload.id = app.id;
     }
     try {
-      const { code, data } = await request[method](`${config.apiPrefix}apps`, {
-        data: payload,
-      });
+      const { code, data } = await request[method](
+        `${config.apiPrefix}apps`,
+        payload,
+      );
 
       if (code === 200) {
         message.success(app ? '更新应用成功' : '新建应用成功');

src/pages/setting/checkUpdate.tsx

@@ -129,7 +129,7 @@ const CheckUpdate = ({ socketMessage, systemInfo }: any) => {
       okText: '重启',
       onOk() {
         request
-          .put(`${config.apiPrefix}system/reload`, { data: { type: 'system' } })
+          .put(`${config.apiPrefix}system/reload`, { type: 'system' })
           .then((_data: any) => {
             message.success({
               content: (

src/pages/setting/notification.tsx

@@ -20,9 +20,7 @@ const NotificationSetting = ({ data }: any) => {
 
     request
       .put(`${config.apiPrefix}user/notification`, {
-        data: {
-          ...values,
-        },
+        values,
       })
       .then(({ code, data }) => {
         if (code === 200) {

src/pages/setting/other.tsx

@@ -19,6 +19,7 @@ import { saveAs } from 'file-saver';
 import './index.less';
 import { UploadOutlined } from '@ant-design/icons';
 import Countdown from 'antd/lib/statistic/Countdown';
+import useProgress from './progress';
 
 const optionsWithDisabled = [
   { label: '亮色', value: 'light' },
@@ -39,6 +40,8 @@ const Other = ({
   const [form] = Form.useForm();
   const modalRef = useRef<any>();
   const [exportLoading, setExportLoading] = useState(false);
+  const showUploadProgress = useProgress('上传');
+  const showDownloadProgress = useProgress('下载');
 
   const {
     enable: enableDarkMode,
@@ -78,9 +81,7 @@ const Other = ({
 
   const updateSystemConfig = () => {
     request
-      .put(`${config.apiPrefix}system/config`, {
-        data: { ...systemConfig },
-      })
+      .put(`${config.apiPrefix}system/config`, systemConfig)
       .then(({ code, data }) => {
         if (code === 200) {
           message.success('更新成功');
@@ -94,7 +95,18 @@ const Other = ({
   const exportData = () => {
     setExportLoading(true);
     request
-      .put(`${config.apiPrefix}system/data/export`, { responseType: 'blob' })
+      .put<Blob>(
+        `${config.apiPrefix}system/data/export`,
+        {},
+        {
+          responseType: 'blob',
+          onDownloadProgress: (e) => {
+            if (e.progress) {
+              showDownloadProgress(parseFloat((e.progress * 100).toFixed(1)));
+            }
+          },
+        },
+      )
       .then((res) => {
         saveAs(res, 'data.tgz');
       })
@@ -104,34 +116,6 @@ const Other = ({
       .finally(() => setExportLoading(false));
   };
 
-  const showUploadModal = (progress: number) => {
-    if (modalRef.current) {
-      modalRef.current.update({
-        content: (
-          <Progress
-            style={{ display: 'flex', justifyContent: 'center' }}
-            type="circle"
-            percent={progress}
-          />
-        ),
-      });
-    } else {
-      modalRef.current = Modal.info({
-        width: 600,
-        maskClosable: false,
-        title: '上传中...',
-        centered: true,
-        content: (
-          <Progress
-            style={{ display: 'flex', justifyContent: 'center' }}
-            type="circle"
-            percent={progress}
-          />
-        ),
-      });
-    }
-  };
-
   const showReloadModal = () => {
     Modal.confirm({
       width: 600,
@@ -142,8 +126,8 @@ const Other = ({
       okText: '重启',
       onOk() {
         request
-          .put(`${config.apiPrefix}system/reload`, { data: { type: 'data' } })
-          .then((_data: any) => {
+          .put(`${config.apiPrefix}system/reload`, { type: 'data' })
+          .then(() => {
             message.success({
               content: (
                 <span>
@@ -231,8 +215,7 @@ const Other = ({
           action="/api/system/data/import"
           onChange={(e) => {
             if (e.event?.percent) {
-              const percent = parseFloat(e.event?.percent.toFixed(1));
-              showUploadModal(percent);
+              showUploadProgress(parseFloat(e.event?.percent.toFixed(1)));
               if (e.event?.percent === 100) {
                 showReloadModal();
               }

src/pages/setting/progress.tsx

@@ -0,0 +1,33 @@
+import { Modal, Progress } from 'antd';
+import { useRef } from 'react';
+
+export default function useProgress(title: string) {
+  const modalRef = useRef<ReturnType<typeof Modal.info>>();
+
+  const ProgressElement = ({ percent }: { percent: number }) => (
+    <Progress
+      style={{ display: 'flex', justifyContent: 'center' }}
+      type="circle"
+      percent={percent}
+    />
+  );
+
+  const showProgress = (percent: number) => {
+    if (modalRef.current) {
+      modalRef.current.update({
+        title: `${title}${percent >= 100 ? '成功' : '中...'}`,
+        content: <ProgressElement percent={percent} />,
+      });
+    } else {
+      modalRef.current = Modal.info({
+        width: 600,
+        maskClosable: false,
+        title: `${title}${percent >= 100 ? '成功' : '中...'}`,
+        centered: true,
+        content: <ProgressElement percent={percent} />,
+      });
+    }
+  };
+
+  return showProgress;
+}

src/pages/setting/security.tsx

@@ -22,10 +22,8 @@ const SecuritySettings = ({ user, userChange }: any) => {
   const handleOk = (values: any) => {
     request
       .put(`${config.apiPrefix}user`, {
-        data: {
-          username: values.username,
-          password: values.password,
-        },
+        username: values.username,
+        password: values.password,
       })
       .then(({ code, data }) => {
         if (code === 200) {
@@ -64,7 +62,7 @@ const SecuritySettings = ({ user, userChange }: any) => {
   const completeTowFactor = () => {
     setLoading(true);
     request
-      .put(`${config.apiPrefix}user/two-factor/active`, { data: { code } })
+      .put(`${config.apiPrefix}user/two-factor/active`, { code })
       .then(({ code, data }) => {
         if (code === 200) {
           if (data) {