大改动

src/pages/Record/index.tsx

@@ -23,28 +23,31 @@ export default () => {
 
   const getRecordList = async () => {
     try {
+      setLoading(true);
+
       const { data } = await getRecordListAPI();
       setRecordList(data as Record[]);
+
+      setLoading(false);
     } catch (error) {
       setLoading(false);
     }
-
-    setLoading(false);
   };
 
   useEffect(() => {
-    setLoading(true);
     getRecordList()
   }, []);
 
   const delRecordData = async (id: number) => {
-    setLoading(true);
-
     try {
+      setLoading(true);
+
       await delRecordDataAPI(id);
       await getRecordList();
       form.resetFields()
       notification.success({ message: '🎉 删除说说成功' })
+
+      setLoading(false);
     } catch (error) {
       setLoading(false);
     }
@@ -116,9 +119,9 @@ export default () => {
   ];
 
   const onFilterSubmit = async (values: FilterForm) => {
-    setLoading(true);
-
     try {
+      setLoading(true);
+
       const query = {
         key: values.content,
         startDate: values.createTime && values.createTime[0].valueOf() + '',
@@ -126,12 +129,12 @@ export default () => {
       }
 
       const { data } = await getRecordListAPI({ query });
-      setRecordList(data as Record[]);
+      setRecordList(data);
+
+      setLoading(false);
     } catch (error) {
       setLoading(false);
     }
-
-    setLoading(false);
   }
 
   return (

src/pages/Role/index.tsx

@@ -52,54 +52,56 @@ export default () => {
     // 获取角色列表
     const getRoleList = async () => {
         try {
+            setLoading(true);
+
             const { data } = await getRoleListAPI();
             setRoleList(data as Role[]);
+
+            setLoading(false);
         } catch (error) {
             setLoading(false);
         }
-
-        setLoading(false);
     };
 
     useEffect(() => {
-        setLoading(true);
         getRoleList()
         getRouteList()
     }, []);
 
     // 获取指定角色的路由列表
     const bindingRoute = async (record: Role) => {
-        setEditLoading(true)
-        
         try {
+            setEditLoading(true)
+
             setIsModalOpen(true)
+            
             const { data } = await getRoleRouteListAPI(record.id);
             setTargetKeys(data.map(item => item.id) as number[])
+
+            setEditLoading(false)
         } catch (error) {
             setEditLoading(false)
         }
-
-        setEditLoading(false)
     }
 
     const editRoleData = async (record: Role) => {
-        setEditLoading(true);
-
         try {
+            setEditLoading(true);
+
             const { data } = await getRoleDataAPI(record.id);
             setRole(data);
             form.setFieldsValue(data);
+
+            setEditLoading(false);
         } catch (error) {
             setEditLoading(false);
         }
-
-        setEditLoading(false);
     };
 
     const delRoleData = async (id: number) => {
-        setLoading(true);
-
         try {
+            setLoading(true);
+
             await delRoleDataAPI(id);
             await getRoleList();
             message.success('🎉 删除角色成功');
@@ -109,9 +111,9 @@ export default () => {
     };
 
     const onSubmit = async () => {
-        setBtnLoading(true)
-
         try {
+            setBtnLoading(true)
+
             form.validateFields().then(async (values: Role) => {
                 if (role.id) {
                     await editRoleDataAPI({ ...role, ...values });
@@ -126,11 +128,11 @@ export default () => {
                 form.setFieldsValue({ name: '', description: '' })
                 setRole({} as Role);
             });
+
+            setBtnLoading(false)
         } catch (error) {
             setBtnLoading(false)
         }
-
-        setBtnLoading(false)
     };
 
     // 设置目标路由
@@ -138,10 +140,11 @@ export default () => {
 
     // 绑定路由
     const onBindingRouteSubmit = async () => {
-        setBindingLoading(true);
-
         try {
+            setBindingLoading(true);
+
             await bindingRouteAPI(role.id, targetKeys)
+            setBindingLoading(false);
             message.success('🎉 绑定成功');
             // 刷新页面
             window.location.reload()

src/pages/Route/index.tsx

@@ -33,51 +33,54 @@ export default () => {
 
     const getRouteList = async () => {
         try {
+            setLoading(true);
+
             const { data } = await getRouteListAPI();
             setList(data);
+
+            setLoading(false);
         } catch (error) {
             setLoading(false);
         }
-
-        setLoading(false);
     };
 
     useEffect(() => {
-        setLoading(true);
         getRouteList();
     }, []);
 
     const editRouteData = async (record: Route) => {
-        setLoading(true)
-
         try {
+            setLoading(true)
+
             const { data } = await getRouteDataAPI(record.id);
             setRoute(data);
             form.setFieldsValue(data);
+
+            setLoading(false)
         } catch (error) {
             setLoading(false)
         }
-
-        setLoading(false)
     };
 
     const delRouteData = async (id: number) => {
-        setLoading(true);
-
         try {
+            setLoading(true);
+
             await delRouteDataAPI(id);
             await getRouteList();
             message.success('🎉 删除路由成功');
+
+            setLoading(false)
         } catch (error) {
             setLoading(false)
         }
     };
 
     const onSubmit = async () => {
-        setLoading(true);
-        setBtnLoading(true)
-
         try {
+            setLoading(true);
+            setBtnLoading(true)
+
             form.validateFields().then(async (values: Route) => {
                 if (route.id) {
                     await editRouteDataAPI({ ...route, ...values });
@@ -92,13 +95,13 @@ export default () => {
                 form.setFieldsValue({ path: '', description: '' })
                 setRoute({} as Route);
             });
+
+            setLoading(false)
+            setBtnLoading(true)
         } catch (error) {
             setLoading(false)
             setBtnLoading(true)
         }
-
-        setLoading(false)
-        setBtnLoading(true)
     };
 
     return (

src/pages/Rss/index.tsx

@@ -20,17 +20,18 @@ export default () => {
 
     const getRssList = async () => {
         try {
+            setLoading(true);
+
             const { data } = await getRssListAPI();
             setList(data);
+
+            setLoading(false);
         } catch (error) {
             setLoading(false);
         }
-
-        setLoading(false);
     };
 
     useEffect(() => {
-        setLoading(true);
         getRssList();
     }, []);
 

src/pages/Setup/components/My/index.tsx

@@ -19,25 +19,26 @@ export default () => {
 
     const getUserData = async () => {
         try {
+            setLoading(true);
+
             const { data } = await getUserDataAPI(store.user?.id);
             store.setUser(data);
             form.setFieldsValue(data);
+
+            setLoading(false);
         } catch (error) {
             setLoading(false);
         }
-
-        setLoading(false);
     };
 
     useEffect(() => {
-        setLoading(true);
         getUserData();
     }, []);
 
     const onSubmit = async (values: UserForm) => {
-        setLoading(true)
-
         try {
+            setLoading(true)
+
             await editUserDataAPI({
                 id: store.user.id, ...values,
                 role: undefined

src/pages/Setup/components/System/index.tsx

@@ -35,9 +35,9 @@ export default () => {
     };
 
     const handleSubmit = async (values: EditUser) => {
-        setLoading(true)
-
         try {
+            setLoading(true)
+
             await editAdminPassAPI(values);
 
             confirm({
@@ -47,11 +47,11 @@ export default () => {
                 onOk: store.quitLogin,
                 cancelButtonProps: { style: { display: 'none' } }
             });
+
+            setLoading(false)
         } catch (error) {
             setLoading(false)
         }
-
-        setLoading(false)
     };
 
     return (

src/pages/Setup/components/Theme/components/RecordTheme/index.tsx

@@ -1,49 +1,48 @@
 import { useEffect, useState } from 'react';
-import { Spin, Form, notification, Input, Button } from 'antd';
+import { Form, notification, Input, Button } from 'antd';
-import { LoadingOutlined } from '@ant-design/icons';
 import { Theme } from '@/types/app/project';
 import { editConfigDataAPI, getConfigDataAPI } from '@/api/Project';
 
-const RecordTheme = () => {
+export default () => {
     const [loading, setLoading] = useState<boolean>(false);
 
     const [form] = Form.useForm();
 
     const getLayoutData = async () => {
         try {
-            const { data } = await getConfigDataAPI<Theme>("layout");
+            setLoading(true);
 
+            const { data } = await getConfigDataAPI<Theme>("layout");
             form.setFieldsValue({
                 record_name: data.record_name,
                 record_info: data.record_info
             });
+
+            setLoading(false);
         } catch (error) {
             setLoading(false);
         }
-
-        setLoading(false);
     };
 
     useEffect(() => {
-        setLoading(true);
         getLayoutData();
     }, []);
 
     const editThemeData = async (values: { record_name: string, record_info: string }) => {
-        setLoading(true);
-
         try {
+            setLoading(true);
+
             await editConfigDataAPI("layout", values);
 
             notification.success({
                 message: '成功',
                 description: '🎉 修改主题成功',
             });
+
+            setLoading(false);
         } catch (error) {
             setLoading(false);
         }
-
-        setLoading(false);
     };
 
     return (
@@ -70,5 +69,3 @@ const RecordTheme = () => {
         </div>
     );
 };
-
-export default RecordTheme;

src/pages/Setup/components/Theme/components/SynthesisTheme/index.tsx

@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react';
-import { notification, Divider, Input, Alert, Button, Spin, Form } from 'antd';
+import { notification, Divider, Input, Alert, Button, Form } from 'antd';
-import { PictureOutlined, LoadingOutlined, CloudUploadOutlined } from '@ant-design/icons';
+import { PictureOutlined, CloudUploadOutlined } from '@ant-design/icons';
 import { editConfigDataAPI, getConfigDataAPI } from '@/api/Project';
 import { Theme } from '@/types/app/project';
 import FileUpload from '@/components/FileUpload';
 
-const SynthesisTheme = () => {
+export default () => {
     const [loading, setLoading] = useState<boolean>(false);
 
     const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
@@ -22,6 +22,8 @@ const SynthesisTheme = () => {
 
     const getLayoutData = async () => {
         try {
+            setLoading(true);
+            
             const { data } = await getConfigDataAPI<Theme>("layout");
             setTheme(data);
 
@@ -34,22 +36,21 @@ const SynthesisTheme = () => {
                 covers: data.covers ? JSON.parse(data.covers).join("\n") : '',
                 reco_article: data.reco_article ? JSON.parse(data.reco_article).join("\n") : '',
             });
+
+            setLoading(false);
         } catch (error) {
             setLoading(false);
         }
-
-        setLoading(false);
     };
 
     useEffect(() => {
-        setLoading(true);
         getLayoutData();
     }, []);
 
     const editThemeData = async (values: any) => {
-        setLoading(true);
-
         try {
+            setLoading(true);
+
             const updatedLayout = {
                 ...theme,
                 ...values,
@@ -64,11 +65,11 @@ const SynthesisTheme = () => {
                 message: '成功',
                 description: '🎉 修改主题成功',
             });
+
+            setLoading(false);
         } catch (error) {
             setLoading(false);
         }
-
-        setLoading(false);
     };
 
     const getFile = (name: string) => {
@@ -199,5 +200,3 @@ const SynthesisTheme = () => {
         </div>
     );
 };
-
-export default SynthesisTheme;

src/pages/Swiper/index.tsx

@@ -43,53 +43,54 @@ export default () => {
 
     const getSwiperList = async () => {
         try {
+            setLoading(true);
+
             const { data } = await getSwiperListAPI();
             setList(data as Swiper[]);
+
+            setLoading(false);
         } catch (error) {
             setLoading(false);
         }
-
-        setLoading(false);
     };
 
     useEffect(() => {
-        setLoading(true);
         getSwiperList();
     }, []);
 
     const editSwiperData = async (record: Swiper) => {
-        setEditLoading(true);
-        setTab('operate');
-
         try {
+            setEditLoading(true);
+            setTab('operate');
+
             const { data } = await getSwiperDataAPI(record.id)
             setSwiper(data);
             form.setFieldsValue(record);
+
+            setEditLoading(false);
         } catch (error) {
             setEditLoading(false);
         }
-
-        setEditLoading(false);
     };
 
     const delSwiperData = async (id: number) => {
-        setBtnLoading(true);
-
         try {
+            setBtnLoading(true);
+
             await delSwiperDataAPI(id);
             await getSwiperList();
             message.success('🎉 删除轮播图成功');
+
+            setBtnLoading(false);
         } catch (error) {
             setBtnLoading(false);
         }
-
-        setBtnLoading(false);
     };
 
     const onSubmit = async () => {
-        setBtnLoading(true)
-
         try {
+            setBtnLoading(true)
+
             form.validateFields().then(async (values: Swiper) => {
                 if (swiper.id) {
                     await editSwiperDataAPI({ ...swiper, ...values });
@@ -104,6 +105,8 @@ export default () => {
                 form.resetFields();
                 setSwiper({} as Swiper);
             })
+
+            setBtnLoading(false)
         } catch (error) {
             setBtnLoading(false)
         }

src/pages/Tag/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Table, Button, Form, Input, Popconfirm, message, Card } from 'antd';
+import { Table, Button, Form, Input, Popconfirm, message, Card, Spin } from 'antd';
 import { getTagListAPI, addTagDataAPI, editTagDataAPI, delTagDataAPI, getTagDataAPI } from '@/api/Tag';
 import { Tag } from '@/types/app/tag';
 import Title from '@/components/Title';
@@ -8,6 +8,7 @@ import { ColumnsType } from 'antd/es/table';
 export default () => {
     const [loading, setLoading] = useState<boolean>(false);
     const [btnLoading, setBtnLoading] = useState(false)
+    const [editLoading, setEditLoading] = useState(false)
 
     const [form] = Form.useForm();
 
@@ -32,38 +33,39 @@ export default () => {
 
     const getTagList = async () => {
         try {
+            setLoading(true);
+
             const { data } = await getTagListAPI();
             setList(data as Tag[]);
+
+            setLoading(false);
         } catch (error) {
             setLoading(false);
         }
-
-        setLoading(false);
     };
 
     useEffect(() => {
-        setLoading(true);
         getTagList();
     }, []);
 
     const editTagData = async (record: Tag) => {
-        setLoading(true);
-
         try {
+            setEditLoading(true);
+
             const { data } = await getTagDataAPI(record.id)
             setTag(data);
             form.setFieldsValue(data);
-        } catch (error) {
-            setLoading(false);
-        }
 
-        setLoading(false);
+            setEditLoading(false);
+        } catch (error) {
+            setEditLoading(false);
+        }
     };
 
     const delTagData = async (id: number) => {
-        setLoading(true);
-
         try {
+            setLoading(true);
+
             await delTagDataAPI(id);
             await getTagList();
             message.success('🎉 删除标签成功');
@@ -73,10 +75,10 @@ export default () => {
     };
 
     const onSubmit = async () => {
-        setLoading(true);
-        setBtnLoading(true);
-
         try {
+            setLoading(true);
+            setBtnLoading(true);
+
             form.validateFields().then(async (values: Tag) => {
                 if (tag.id) {
                     await editTagDataAPI({ ...tag, ...values });
@@ -91,12 +93,13 @@ export default () => {
                 form.setFieldsValue({ name: '' })
                 setTag({} as Tag);
             });
+
+            setLoading(false);
+            setBtnLoading(false);
         } catch (error) {
             setLoading(false);
             setBtnLoading(false);
         }
-
-        setBtnLoading(false);
     };
 
     return (
@@ -104,23 +107,25 @@ export default () => {
             <Title value="标签管理" />
 
             <div className='flex md:justify-between flex-col md:flex-row mx-auto mt-2'>
-                <Card className="w-full md:w-[40%] h-[calc(100vh-180px)]">
+                <Spin spinning={editLoading}>
-                    <Form
+                    <Card className="w-full md:w-[40%] h-[calc(100vh-180px)]">
-                        form={form}
+                        <Form
-                        layout="vertical"
+                            form={form}
-                        initialValues={tag}
+                            layout="vertical"
-                        onFinish={onSubmit}
+                            initialValues={tag}
-                        size='large'
+                            onFinish={onSubmit}
-                    >
+                            size='large'
-                        <Form.Item label="标签名称" name="name" rules={[{ required: true, message: '标签名称不能为空' }]}>
+                        >
-                            <Input placeholder="请输入标签名称" />
+                            <Form.Item label="标签名称" name="name" rules={[{ required: true, message: '标签名称不能为空' }]}>
-                        </Form.Item>
+                                <Input placeholder="请输入标签名称" />
+                            </Form.Item>
 
-                        <Form.Item>
+                            <Form.Item>
-                            <Button type="primary" htmlType="submit" loading={btnLoading} className="w-full">{tag.id ? '编辑标签' : '新增标签'}</Button>
+                                <Button type="primary" htmlType="submit" loading={btnLoading} className="w-full">{tag.id ? '编辑标签' : '新增标签'}</Button>
-                        </Form.Item>
+                            </Form.Item>
-                    </Form>
+                        </Form>
-                </Card>
+                    </Card>
+                </Spin>
 
                 <Card className="w-full md:w-[59%] [&>.ant-card-body]:!p-0 mt-2 md:mt-0">
                     <Table

src/pages/User/index.tsx

@@ -111,33 +111,31 @@ export default () => {
 
     const getUserList = async () => {
         try {
+            setLoading(true);
+
             const { data } = await getUserListAPI();
             setUserList(data as User[]);
+
             setLoading(false);
         } catch (error) {
             setLoading(false);
         }
-
-        setLoading(false);
     };
 
     const getRoleList = async () => {
         const { data } = await getRoleListAPI();
-        console.log(data);
-
         setRoleList(data);
     };
 
     useEffect(() => {
-        setLoading(true);
         getUserList();
         getRoleList()
     }, []);
 
     const delUserData = async (id: number) => {
-        setLoading(true);
-
         try {
+            setLoading(true);
+
             await delUserDataAPI(id);
             await getUserList();
             notification.success({ message: '🎉 删除用户成功' });
@@ -147,18 +145,18 @@ export default () => {
     };
 
     const editUserData = async (id: number) => {
-        setEditLoading(true);
-
         try {
+            setEditLoading(true);
+
             setDrawerVisible(true);
             const { data } = await getUserDataAPI(id)
             setUser(data);
             form.setFieldsValue(data);
+
+            setEditLoading(false);
         } catch (error) {
             setEditLoading(false);
         }
-
-        setEditLoading(false);
     };
 
     const reset = () => {
@@ -167,9 +165,9 @@ export default () => {
     }
 
     const onSubmit = async () => {
-        setBtnLoading(true)
-
         try {
+            setBtnLoading(true)
+
             form.validateFields().then(async (values: User) => {
                 if (user.id) {
                     await editUserDataAPI({ ...user, ...values });
@@ -183,17 +181,17 @@ export default () => {
                 setDrawerVisible(false);
                 reset()
             })
+
+            setBtnLoading(false)
         } catch (error) {
             setBtnLoading(false)
         }
-
-        setBtnLoading(false)
     };
 
     const onFilterSubmit = async (values: FilterForm) => {
-        setLoading(true)
-
         try {
+            setLoading(true)
+
             const query: FilterUser = {
                 key: values.name,
                 roleId: values.role,
@@ -202,12 +200,12 @@ export default () => {
             }
 
             const { data } = await getUserListAPI({ query });
-            setUserList(data as User[]);
+            setUserList(data);
+
+            setLoading(false)
         } catch (error) {
             setLoading(false)
         }
-
-        setLoading(false)
     }
 
     return (

src/pages/Wall/index.tsx

@@ -17,13 +17,15 @@ export default () => {
 
     const getWallList = async () => {
         try {
+            setLoading(true)
+
             const { data } = await getWallListAPI();
             setList(data)
+
+            setLoading(false)
         } catch (error) {
             setLoading(false)
         }
-
-        setLoading(false)
     }
 
     const delWallData = async (id: number) => {
@@ -48,7 +50,6 @@ export default () => {
     }
 
     useEffect(() => {
-        setLoading(true)
         getWallList();
         getCateList()
     }, []);
@@ -118,9 +119,9 @@ export default () => {
     const { RangePicker } = DatePicker;
 
     const onFilterSubmit = async (values: FilterForm) => {
-        setLoading(true)
-
         try {
+            setLoading(true)
+
             const query: FilterWall = {
                 key: values.content,
                 cateId: values.cateId,
@@ -130,11 +131,11 @@ export default () => {
 
             const { data } = await getWallListAPI({ query });
             setList(data)
+
+            setLoading(false)
         } catch (error) {
             setLoading(false)
         }
-
-        setLoading(false)
     }
 
     return (

src/pages/Web/index.tsx

@@ -27,17 +27,19 @@ export default () => {
     // 获取网站列表
     const getLinkList = async () => {
         try {
+            setLoading(true);
+
             const { data } = await getLinkListAPI();
             data.sort((a, b) => a.order - b.order)
             data.sort((a, b) => a.type.order - b.type.order)
 
             setList(data);
             setListTemp(data);
+
+            setLoading(false)
         } catch (error) {
             setLoading(false);
         }
-
-        setLoading(false)
     };
 
     // 获取网站类型列表
@@ -47,7 +49,6 @@ export default () => {
     };
 
     useEffect(() => {
-        setLoading(true);
         getLinkList();
         getWebTypeList();
     }, []);
@@ -57,9 +58,9 @@ export default () => {
     }, [search, list]);
 
     const deleteLinkData = async (id: number) => {
-        setLoading(true);
-
         try {
+            setLoading(true);
+
             await delLinkDataAPI(id);
             await getLinkList();
             message.success('🎉 删除网站成功');
@@ -69,20 +70,19 @@ export default () => {
     };
 
     const editLinkData = async (record: Web) => {
-        setEditLoading(true)
-
         try {
+            setEditLoading(true)
             setTab('operate');
             setIsMethod("edit");
 
             const { data } = await getLinkDataAPI(record.id)
             setLink(data);
             form.setFieldsValue(data);
+
+            setEditLoading(false)
         } catch (error) {
             setEditLoading(false)
         }
-
-        setEditLoading(false)
     };
 
     // 做一些初始化的事情
@@ -98,9 +98,9 @@ export default () => {
     };
 
     const submit = async () => {
-        setBtnLoading(true)
-
         try {
+            setBtnLoading(true)
+
             form.validateFields().then(async (values: Web) => {
                 if (isMethod === "edit") {
                     await editLinkDataAPI({ ...link, ...values });
@@ -114,11 +114,11 @@ export default () => {
                 reset()
                 setTab('list');
             });
+
+            setBtnLoading(false)
         } catch (error) {
             setBtnLoading(false)
         }
-
-        setBtnLoading(false)
     };
 
     const { Option } = Select;
@@ -137,7 +137,7 @@ export default () => {
             label: '网站列表',
             key: 'list',
             children: (
-                <>
+                <div>
                     <div className="w-[300px] mx-auto">
                         <Input
                             size="large"
@@ -179,14 +179,14 @@ export default () => {
                             <Empty description="暂无数据" className='my-7' />
                         )}
                     </Spin>
-                </>
+                </div>
             ),
         },
         {
             label: isMethod === "edit" ? '编辑网站' : '新增网站',
             key: 'operate',
             children: (
-                <>
+                <div>
                     <h2 className="text-xl pb-4 text-center">{isMethod === "edit" ? '编辑网站' : '新增网站'}</h2>
 
                     <Spin spinning={editLoading}>
@@ -232,7 +232,7 @@ export default () => {
                             </Form>
                         </div>
                     </Spin>
-                </>
+                </div>
             ),
         },
     ];

src/pages/Work/index.tsx

@@ -27,6 +27,8 @@ export default () => {
     // 重新获取最新数据
     const fetchData = async (type: Menu) => {
         try {
+            setLoading(true)
+
             if (type === "comment") {
                 const { data } = await getCommentListAPI({ query: { status: 0 }, pattern: "list" });
                 setCommentList(data);
@@ -37,15 +39,14 @@ export default () => {
                 const { data } = await getWallListAPI({ query: { status: 0 } });
                 setWallList(data);
             }
+
+            setLoading(false)
         } catch (error) {
             setLoading(false)
         }
-
-        setLoading(false)
     };
 
     useEffect(() => {
-        setLoading(true)
         fetchData(active);
     }, [active]);