大改动

src/pages/Cate/index.tsx

@@ -6,8 +6,8 @@ import { Form, Input, Button, Tree, Modal, Spin, Dropdown, Card, MenuProps, Popc
 import Title from '@/components/Title';
 import "./index.scss"
 
-export default () => {
+const CatePage = () => {
-    const [loading, setLoading] = useState(false);
+    const [loading, setLoading] = useState(false)
     const [btnLoading, setBtnLoading] = useState(false)
     const [editLoading, setEditLoading] = useState(false)
 
@@ -19,56 +19,58 @@ export default () => {
     const [form] = Form.useForm();
 
     const getCateList = async () => {
-        const { data } = await getCateListAPI();
+        setLoading(true)
-        data.sort((a, b) => a.order - b.order)
 
-        setList(data as Cate[]);
+        try {
-        setLoading(false);
+            const { data } = await getCateListAPI();
+            data.sort((a, b) => a.order - b.order)
+            setList(data);
+        } catch (error) {
+            setLoading(false)
+        }
+
+        setLoading(false)
     };
 
     useEffect(() => {
-        setLoading(true);
+        setLoading(true)
-        getCateList();
+        getCateList()
     }, []);
 
     const addCateData = (id: number) => {
         setIsMethod("create")
         setIsModelOpen(true);
         setIsCateShow(false)
-
         form.resetFields();
-
         setCate({ ...cate, level: id, type: "cate" });
     };
 
     const editCateData = async (id: number) => {
-        setEditLoading(true);
+        setIsMethod("edit");
+        setIsModelOpen(true);
+        setEditLoading(true)
 
         try {
-            setIsMethod("edit")
-            setIsModelOpen(true);
             const { data } = await getCateDataAPI(id);
+            setIsCateShow(data.type === "cate" ? false : true);
             setCate(data);
             form.setFieldsValue(data);
-
-            // 判断是分类还是导航
-            setIsCateShow(data.type === "cate" ? false : true)
         } catch (error) {
-            setEditLoading(false);
+            setEditLoading(false)
         }
 
-        setEditLoading(false);
+        setEditLoading(false)
     };
 
     const delCateData = async (id: number) => {
-        setLoading(true);
+        setLoading(true)
 
         try {
             await delCateDataAPI(id);
-            await getCateList();
             message.success('🎉 删除分类成功');
+            await getCateList();
         } catch (error) {
-            setLoading(false);
+            setLoading(false)
         }
     };
 
@@ -92,6 +94,7 @@ export default () => {
                 // 初始化表单状态
                 form.resetFields();
                 setCate({} as Cate);
+
                 setIsModelOpen(false);
                 setIsMethod("create")
             })
@@ -149,7 +152,7 @@ export default () => {
     )
 
     return (
-        <>
+        <div>
             <Title value="分类管理">
                 <Button type="primary" size='large' onClick={() => addCateData(0)}>新增分类</Button>
             </Title>
@@ -199,6 +202,8 @@ export default () => {
                     </Form>
                 </Modal>
             </Card>
-        </>
+        </div>
     );
 };
+
+export default CatePage;

src/pages/Dashboard/components/Stats/components/NewOldVisitors/index.tsx

@@ -1,7 +1,8 @@
 import { ApexOptions } from 'apexcharts';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import ReactApexChart from 'react-apexcharts';
 import dayjs from 'dayjs';
+import { Spin } from 'antd';
 
 interface ChartThreeState {
   series: number[];
@@ -49,7 +50,9 @@ const options: ApexOptions = {
   ],
 };
 
-const ChartThree: React.FC = () => {
+export default () => {
+  const [loading, setLoading] = useState(true)
+
   const [result, setResult] = useState({ newVisitors: 0, oldVisitors: 0 })
   const [date, setDate] = useState(dayjs(new Date()).format("YYYY/MM/DD"));
 
@@ -58,18 +61,26 @@ const ChartThree: React.FC = () => {
   });
 
   const getDataList = async () => {
-    const siteId = import.meta.env.VITE_BAIDU_TONGJI_SITE_ID;
+    setLoading(true)
-    const token = import.meta.env.VITE_BAIDU_TONGJI_ACCESS_TOKEN;
 
-    const response = await fetch(`/api/rest/2.0/tongji/report/getData?access_token=${token}&site_id=${siteId}&start_date=${date}&end_date=${date}&metrics=new_visitor_count%2Cnew_visitor_ratio&method=trend%2Ftime%2Fa&gran=day&area=`);
+    try {
-    const data = await response.json();
+      const siteId = import.meta.env.VITE_BAIDU_TONGJI_SITE_ID;
-    const { result } = data;
+      const token = import.meta.env.VITE_BAIDU_TONGJI_ACCESS_TOKEN;
 
-    const newVisitors = result.items[1][0][1] !== "--" ? result.items[1][0][1] : 0
+      const response = await fetch(`/api/rest/2.0/tongji/report/getData?access_token=${token}&site_id=${siteId}&start_date=${date}&end_date=${date}&metrics=new_visitor_count%2Cnew_visitor_ratio&method=trend%2Ftime%2Fa&gran=day&area=`);
-    const oldVisitors = result.items[1][0][1] !== "--" ? 100 - result.items[1][0][1] : 0
+      const data = await response.json();
+      const { result } = data;
 
-    setState({ series: [newVisitors, oldVisitors] })
+      const newVisitors = result.items[1][0][1] !== "--" ? result.items[1][0][1] : 0
-    setResult({ newVisitors, oldVisitors })
+      const oldVisitors = result.items[1][0][1] !== "--" ? 100 - result.items[1][0][1] : 0
+
+      setState({ series: [newVisitors, oldVisitors] })
+      setResult({ newVisitors, oldVisitors })
+    } catch (error) {
+      setLoading(false)
+    }
+
+    setLoading(false)
   }
 
   useEffect(() => {
@@ -77,48 +88,48 @@ const ChartThree: React.FC = () => {
   }, [])
 
   return (
-    <div className="sm:px-7.5 col-span-12 rounded-lg border border-stroke bg-white px-5 pb-5 pt-7.5 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-4">
+    <Spin spinning={loading}>
-      <div className="mb-3 justify-between gap-4 sm:flex">
+      <div className="sm:px-7.5 col-span-12 rounded-lg border border-stroke bg-white px-5 pb-5 pt-7.5 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-4">
-        <div>
+        <div className="mb-3 justify-between gap-4 sm:flex">
-          <h5 className="text-xl font-semibold text-black dark:text-white">
+          <div>
-            新老访客
+            <h5 className="text-xl font-semibold text-black dark:text-white">
-          </h5>
+              新老访客
-        </div>
+            </h5>
-      </div>
-
-      <div className="mb-2">
-        <div id="chartThree" className="mx-auto flex justify-center">
-          <ReactApexChart
-            options={options}
-            series={state.series}
-            type="donut"
-          />
-        </div>
-      </div>
-
-      <div className="-mx-8 mt-8 flex flex-wrap items-center justify-center gap-y-3">
-        <div className="sm:w-1/2 w-full px-8">
-          <div className="flex w-full items-center">
-            <span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-[#91C8EA]"></span>
-            <p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
-              <span> 新访客 </span>
-              <span> {result.newVisitors.toFixed(2)}% </span>
-            </p>
           </div>
         </div>
 
-        <div className="sm:w-1/2 w-full px-8">
+        <div className="mb-2">
-          <div className="flex w-full items-center">
+          <div id="chartThree" className="mx-auto flex justify-center">
-            <span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-[#727cf5]"></span>
+            <ReactApexChart
-            <p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
+              options={options}
-              <span> 老访客 </span>
+              series={state.series}
-              <span> {result.oldVisitors.toFixed(2)}% </span>
+              type="donut"
-            </p>
+            />
+          </div>
+        </div>
+
+        <div className="-mx-8 mt-8 flex flex-wrap items-center justify-center gap-y-3">
+          <div className="sm:w-1/2 w-full px-8">
+            <div className="flex w-full items-center">
+              <span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-[#91C8EA]"></span>
+              <p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
+                <span> 新访客 </span>
+                <span> {result.newVisitors.toFixed(2)}% </span>
+              </p>
+            </div>
+          </div>
+
+          <div className="sm:w-1/2 w-full px-8">
+            <div className="flex w-full items-center">
+              <span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-[#727cf5]"></span>
+              <p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
+                <span> 老访客 </span>
+                <span> {result.oldVisitors.toFixed(2)}% </span>
+              </p>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </Spin>
   );
 };
-
-export default ChartThree;

src/pages/Dashboard/components/Stats/components/VisitorsStatisChat/index.tsx

@@ -6,12 +6,13 @@ import { MonthlySums, ChartOneState } from './type';
 import dayjs from 'dayjs';
 import { Result } from '../../type';
 
-const VisitorsStatisChat = () => {
+export default () => {
+    const [loading, setLoading] = useState<boolean>(false);
+
     const [result, setResult] = useState<Result | null>(null);
     const [scope, setScope] = useState<"day" | "month" | "year">("day");
     const [startDate, setStartDate] = useState(dayjs(new Date()).subtract(7, "day").format("YYYY/MM/DD"));
     const [endDate, setEndDate] = useState(dayjs(new Date()).format("YYYY/MM/DD"));
-    const [loading, setLoading] = useState<boolean>(false);
 
     // 图表相关配置
     const [options, setOptions] = useState<ApexOptions>({
@@ -123,15 +124,19 @@ const VisitorsStatisChat = () => {
 
     // 获取统计数据
     const getDataList = useCallback(async () => {
-        setLoading(true);
+        setLoading(true)
 
-        const siteId = import.meta.env.VITE_BAIDU_TONGJI_SITE_ID;
+        try {
-        const token = import.meta.env.VITE_BAIDU_TONGJI_ACCESS_TOKEN;
+            const siteId = import.meta.env.VITE_BAIDU_TONGJI_SITE_ID;
+            const token = import.meta.env.VITE_BAIDU_TONGJI_ACCESS_TOKEN;
 
-        const response = await fetch(`/api/rest/2.0/tongji/report/getData?access_token=${token}&site_id=${siteId}&start_date=${startDate}&end_date=${endDate}&metrics=pv_count%2Cip_count&method=overview%2FgetTimeTrendRpt`);
+            const response = await fetch(`/api/rest/2.0/tongji/report/getData?access_token=${token}&site_id=${siteId}&start_date=${startDate}&end_date=${endDate}&metrics=pv_count%2Cip_count&method=overview%2FgetTimeTrendRpt`);
-        const data = await response.json();
+            const data = await response.json();
-        const { result } = data;
+            const { result } = data;
-        setResult(result);
+            setResult(result);
+        } catch (error) {
+            setLoading(false)
+        }
 
         setLoading(false);
     }, [startDate, endDate]);
@@ -142,6 +147,8 @@ const VisitorsStatisChat = () => {
 
     // 切换不同范围的数据
     const scopeData = useMemo(() => {
+        setLoading(true)
+
         if (!result?.items?.length) return { categories: [], series: [[], []] };
 
         let categories = [];
@@ -231,6 +238,7 @@ const VisitorsStatisChat = () => {
 
     // 当数据发生变化时，更新图表选项和状态
     useEffect(() => {
+        setLoading(true)
         setOptions((data) => ({
             ...data,
             xaxis: { ...options.xaxis, categories: scopeData.categories || [] }
@@ -249,6 +257,8 @@ const VisitorsStatisChat = () => {
                 },
             ],
         }));
+
+        setLoading(false)
     }, [scopeData]);
 
     // 处理范围变更并相应地更新日期范围
@@ -323,5 +333,3 @@ const VisitorsStatisChat = () => {
         </div>
     );
 };
-
-export default VisitorsStatisChat;

src/pages/Dashboard/components/Stats/index.tsx

@@ -1,11 +1,11 @@
+import { useEffect, useState } from "react"
+import { Spin } from "antd";
 import VisitorsStatisChat from "./components/VisitorsStatisChat"
 import NewOldVisitors from './components/NewOldVisitors'
 import CardDataStats from "@/components/CardDataStats"
 
 import { AiOutlineEye, AiOutlineMeh, AiOutlineStock, AiOutlineFieldTime } from "react-icons/ai";
-import { useEffect, useState } from "react"
 import dayjs from 'dayjs';
-import { Spin } from "antd";
 
 export default () => {
     const [loading, setLoading] = useState(false)

src/pages/Dashboard/index.tsx

@@ -2,16 +2,14 @@ import { Card } from 'antd';
 import HeaderInfo from './components/HeaderInfo';
 import Stats from './components/Stats';
 
-const Home = () => {
+export default () => {
   return (
-    <>
+    <div>
       <Card className='[&>.ant-card-body]:!p-3'>
         <HeaderInfo />
       </Card>
 
       <Stats />
-    </>
+    </div>
   );
 };
-
-export default Home;

src/pages/Decycle/index.tsx

@@ -13,11 +13,12 @@ import { useWebStore } from '@/stores';
 import dayjs from 'dayjs';
 
 export default () => {
+    const [loading, setLoading] = useState<boolean>(false);
+
     const navigate = useNavigate()
     const web = useWebStore(state => state.web)
 
     const [current, setCurrent] = useState<number>(1);
-    const [loading, setLoading] = useState<boolean>(false);
     const [articleList, setArticleList] = useState<Article[]>([]);
 
     const [form] = Form.useForm();
@@ -156,7 +157,7 @@ export default () => {
     ];
 
     return (
-        <>
+        <div>
             <Title value="回收站" />
 
             <Card className={`${titleSty} mt-2 min-h-[calc(100vh-180px)]`}>
@@ -164,7 +165,6 @@ export default () => {
                     rowKey="id"
                     dataSource={articleList}
                     columns={columns as any}
-                    loading={loading}
                     scroll={{ x: 'max-content' }}
                     pagination={{
                         position: ['bottomCenter'],
@@ -174,8 +174,9 @@ export default () => {
                             setCurrent(current)
                         }
                     }}
+                    loading={loading}
                 />
             </Card>
-        </>
+        </div>
     );
 };

src/pages/Draft/index.tsx

@@ -12,10 +12,11 @@ import type { Article } from '@/types/app/article';
 import { useWebStore } from '@/stores';
 
 export default () => {
+    const [loading, setLoading] = useState<boolean>(false);
+    
     const web = useWebStore(state => state.web)
 
     const [current, setCurrent] = useState<number>(1);
-    const [loading, setLoading] = useState<boolean>(false);
     const [articleList, setArticleList] = useState<Article[]>([]);
 
     const [form] = Form.useForm();
@@ -110,7 +111,7 @@ export default () => {
     ];
 
     return (
-        <>
+        <div>
             <Title value="草稿箱" />
 
             <Card className={`${titleSty} mt-2 min-h-[calc(100vh-180px)]`}>
@@ -130,6 +131,6 @@ export default () => {
                     }}
                 />
             </Card>
-        </>
+        </div>
     );
 };

src/pages/File/index.tsx

@@ -21,6 +21,8 @@ const breakpointColumnsObj = {
 
 export default () => {
     const [loading, setLoading] = useState(false)
+    const [btnLoading, setBtnLoading] = useState(false)
+    const [downloadLoading, setDownloadLoading] = useState(false)
 
     const [openUploadModalOpen, setOpenUploadModalOpen] = useState(false);
     const [openFileInfoDrawer, setOpenFileInfoDrawer] = useState(false);
@@ -34,6 +36,8 @@ export default () => {
 
     // 获取目录列表
     const getDirList = async () => {
+        setLoading(true)
+
         try {
             const { data } = await getDirListAPI()
             setDirList(data)
@@ -46,44 +50,59 @@ export default () => {
 
     // 获取指定目录的文件列表
     const getFileList = async (dir: string) => {
-        const { data } = await getFileListAPI(dir)
+        setLoading(true)
 
-        if (!fileList.length && !(data as File[]).length) message.error("该目录中没有文件")
+        try {
+            const { data } = await getFileListAPI(dir)
+            if (!fileList.length && !data.length) message.error("该目录中没有文件")
+            setFileList(data)
+        } catch (error) {
+            setLoading(false)
+        }
 
-        setFileList(data as File[])
         setLoading(false)
     }
 
     // 删除图片
     const onDeleteImage = async (data: File) => {
-        setLoading(true)
+        setBtnLoading(true)
 
         try {
             await delFileDataAPI(data.url)
+            await getFileList(dirName)
             message.success("🎉 删除图片成功")
-            getFileList(dirName)
             setFile({} as File)
             setOpenFileInfoDrawer(false)
             setOpenFilePreviewDrawer(false)
         } catch (error) {
-            setLoading(false)
+            setBtnLoading(false)
         }
+
+        setBtnLoading(false)
     }
 
     // 下载图片
     const onDownloadImage = (data: File) => {
-        fetch(data.url)
+        setDownloadLoading(true)
-            .then((response) => response.blob())
+
-            .then((blob) => {
+        try {
-                const url = URL.createObjectURL(new Blob([blob]));
+            fetch(data.url)
-                const link = document.createElement<'a'>('a');
+                .then((response) => response.blob())
-                link.href = url;
+                .then((blob) => {
-                link.download = data.name;
+                    const url = URL.createObjectURL(new Blob([blob]));
-                document.body.appendChild(link);
+                    const link = document.createElement<'a'>('a');
-                link.click();
+                    link.href = url;
-                URL.revokeObjectURL(url);
+                    link.download = data.name;
-                link.remove();
+                    document.body.appendChild(link);
-            });
+                    link.click();
+                    URL.revokeObjectURL(url);
+                    link.remove();
+                });
+        } catch (error) {
+            setDownloadLoading(false)
+        }
+
+        setDownloadLoading(false)
     };
 
     // 打开目录
@@ -93,18 +112,17 @@ export default () => {
     }
 
     useEffect(() => {
-        setLoading(true)
         getDirList()
     }, [])
 
     // 查看文件信息
-    const viewOpenFileInfo = (item: File) => {
+    const viewOpenFileInfo = (record: File) => {
         setOpenFileInfoDrawer(true)
-        setFile(item)
+        setFile(record)
     }
 
     return (
-        <>
+        <div>
             <Title value='文件管理' />
 
             <Card className='FilePage mt-2 min-h-[calc(100vh-180px)]'>
@@ -244,7 +262,7 @@ export default () => {
                     }} />
 
                 <Divider orientation="center">图片操作</Divider>
-                <Button type='primary' className='w-full mb-2' onClick={() => onDownloadImage(file)}>下载图片</Button>
+                <Button type='primary' loading={downloadLoading} onClick={() => onDownloadImage(file)} className='w-full mb-2'>下载图片</Button>
                 <Popconfirm
                     title="警告"
                     description="删除后无法恢复，确定要删除吗"
@@ -252,9 +270,9 @@ export default () => {
                     okText="删除"
                     cancelText="取消"
                 >
-                    <Button type='primary' danger className='w-full'>删除图片</Button>
+                    <Button type='primary' danger loading={btnLoading} className='w-full'>删除图片</Button>
                 </Popconfirm>
             </Drawer>
-        </>
+        </div>
     )
 }

src/pages/Footprint/index.tsx

@@ -9,7 +9,7 @@ import { IoSearch } from "react-icons/io5";
 import dayjs from 'dayjs';
 import axios from 'axios';
 
-const FootprintPage = () => {
+export default () => {
   const [loading, setLoading] = useState<boolean>(false);
   const [btnLoading, setBtnLoading] = useState(false)
   const [editLoading, setEditLoading] = useState(false)
@@ -165,8 +165,8 @@ const FootprintPage = () => {
           message.success('🎉 新增足迹成功');
         }
 
+        await getFootprintList();
         reset()
-        getFootprintList();
       });
     } catch (error) {
       setBtnLoading(false)
@@ -225,11 +225,11 @@ const FootprintPage = () => {
       setEditLoading(false)
     }
 
-    
+    setEditLoading(false)
   };
 
   return (
-    <>
+    <div>
       <Title value="足迹管理">
         <Button type="primary" size='large' onClick={addFootprintData}>新增足迹</Button>
       </Title>
@@ -303,8 +303,6 @@ const FootprintPage = () => {
           </Form.Item>
         </Form>
       </Modal>
-    </>
+    </div>
   );
 };
-
-export default FootprintPage;

src/pages/Iterative/index.tsx

@@ -11,7 +11,7 @@ interface Commit {
     }
 }
 
-const Home = () => {
+export default () => {
     const [loading, setLoading] = useState<boolean>(false)
 
     const [year, setYear] = useState<number>(new Date().getFullYear())
@@ -77,7 +77,7 @@ const Home = () => {
     }, [])
 
     return (
-        <>
+        <div>
             <Title value='项目迭代记录'></Title>
 
             <Spin spinning={loading}>
@@ -118,8 +118,6 @@ const Home = () => {
                     </div>
                 </Card>
             </Spin>
-        </>
+        </div>
     );
 };
-
-export default Home;

src/pages/Login/index.tsx

@@ -6,7 +6,7 @@ import { UserOutlined, LockOutlined, EyeOutlined, EyeInvisibleOutlined } from '@
 import { loginDataAPI } from '@/api/User';
 import { useUserStore } from '@/stores';
 
-const LoginPage = () => {
+export default () => {
     const [loading, setLoading] = useState(false)
 
     const [form] = useForm();
@@ -87,5 +87,3 @@ const LoginPage = () => {
         </div>
     );
 };
-
-export default LoginPage;

src/pages/Oss/index.tsx

@@ -6,7 +6,7 @@ import Title from '@/components/Title';
 import type { ColumnsType } from 'antd/es/table';
 import { titleSty } from '@/styles/sty';
 
-const StoragePage = () => {
+export default () => {
     const [loading, setLoading] = useState<boolean>(false);
     const [btnLoading, setBtnLoading] = useState(false);
     const [editLoading, setEditLoading] = useState(false)
@@ -187,7 +187,7 @@ const StoragePage = () => {
     };
 
     return (
-        <>
+        <div>
             <Title value="存储管理">
                 <Button type="primary" size='large' onClick={addOssData}>新增配置</Button>
             </Title>
@@ -291,8 +291,6 @@ const StoragePage = () => {
                     </Form.Item>
                 </Form>
             </Modal >
-        </>
+        </div>
     );
 };
-
-export default StoragePage;

src/pages/Record/index.tsx

@@ -14,7 +14,7 @@ export interface FilterForm {
   createTime: Date[]
 }
 
-const RecordPage = () => {
+export default () => {
   const [loading, setLoading] = useState<boolean>(false);
 
   const [recordList, setRecordList] = useState<Record[]>([]);
@@ -135,7 +135,7 @@ const RecordPage = () => {
   }
 
   return (
-    <>
+    <div>
       <Title value="说说管理" />
 
       <Card className='my-2 overflow-scroll'>
@@ -167,8 +167,6 @@ const RecordPage = () => {
           }}
         />
       </Card>
-    </>
+    </div>
   );
 };
-
-export default RecordPage;

src/pages/Role/index.tsx

@@ -7,7 +7,7 @@ import Title from '@/components/Title';
 import { ColumnsType } from 'antd/es/table';
 import "./index.scss"
 
-const RolePage = () => {
+export default () => {
     const [loading, setLoading] = useState<boolean>(false);
     const [btnLoading, setBtnLoading] = useState(false)
     const [editLoading, setEditLoading] = useState<boolean>(false);
@@ -15,7 +15,6 @@ const RolePage = () => {
 
     const [form] = Form.useForm();
 
-    const [id, setId] = useState(0)
     const [role, setRole] = useState<Role>({} as Role);
     const [roleList, setRoleList] = useState<Role[]>([]);
     const [routeList, setRouteList] = useState<{ key: number, title: string }[]>([]);
@@ -44,12 +43,6 @@ const RolePage = () => {
         }
     ];
 
-    // 获取指定角色的路由列表
-    const getRoleRouteList = async (id: number) => {
-        const { data } = await getRoleRouteListAPI(id);
-        setTargetKeys(data.map(item => item.id) as number[])
-    };
-
     // 获取路由列表
     const getRouteList = async () => {
         const { data } = await getRouteListAPI();
@@ -74,11 +67,19 @@ const RolePage = () => {
         getRouteList()
     }, []);
 
-    // 绑定路由
+    // 获取指定角色的路由列表
-    const bindingRoute = (record: Role) => {
+    const bindingRoute = async (record: Role) => {
-        setIsModalOpen(true)
+        setEditLoading(true)
-        getRoleRouteList(record.id)
+        
-        setId(record.id)
+        try {
+            setIsModalOpen(true)
+            const { data } = await getRoleRouteListAPI(record.id);
+            setTargetKeys(data.map(item => item.id) as number[])
+        } catch (error) {
+            setEditLoading(false)
+        }
+
+        setEditLoading(false)
     }
 
     const editRoleData = async (record: Role) => {
@@ -140,7 +141,7 @@ const RolePage = () => {
         setBindingLoading(true);
 
         try {
-            await bindingRouteAPI(id, targetKeys)
+            await bindingRouteAPI(role.id, targetKeys)
             message.success('🎉 绑定成功');
             // 刷新页面
             window.location.reload()
@@ -153,7 +154,7 @@ const RolePage = () => {
     const [n, setN] = useState(0)
 
     return (
-        <>
+        <div>
             <Title value="角色管理" />
 
             <div className='flex md:justify-between flex-col md:flex-row mx-auto mt-2 min-h-[calc(100vh-180px)]'>
@@ -216,8 +217,6 @@ const RolePage = () => {
 
                 <Button type='primary' className='w-full mt-2' loading={bindingLoading} onClick={onBindingRouteSubmit}>保存</Button>
             </Modal>
-        </>
+        </div>
     );
 };
-
-export default RolePage;

src/pages/Route/index.tsx

@@ -5,7 +5,7 @@ import { Route } from '@/types/app/route';
 import Title from '@/components/Title';
 import { ColumnsType } from 'antd/es/table';
 
-const RoutePage = () => {
+export default () => {
     const [loading, setLoading] = useState<boolean>(false);
     const [btnLoading, setBtnLoading] = useState(false)
 
@@ -102,7 +102,7 @@ const RoutePage = () => {
     };
 
     return (
-        <>
+        <div>
             <Title value="路由管理" />
 
             <div className='flex md:justify-between flex-col md:flex-row mx-auto mt-2 min-h-[calc(100vh-180px)]'>
@@ -143,8 +143,6 @@ const RoutePage = () => {
                     />
                 </Card>
             </div>
-        </>
+        </div>
     );
 };
-
-export default RoutePage;

src/pages/Rss/index.tsx

@@ -35,7 +35,7 @@ export default () => {
     }, []);
 
     return (
-        <>
+        <div>
             <Title value='订阅中心' />
 
             <Spin spinning={loading}>
@@ -70,6 +70,6 @@ export default () => {
                     />
                 </Card>
             </Spin>
-        </>
+        </div>
     );
 };

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

@@ -11,7 +11,7 @@ interface UserForm {
     info: string;
 }
 
-const UserPage = () => {
+export default () => {
     const [loading, setLoading] = useState<boolean>(false);
 
     const [form] = Form.useForm<UserForm>();
@@ -95,11 +95,9 @@ const UserPage = () => {
                 </Form.Item>
 
                 <Form.Item>
-                    <Button type="primary" htmlType="submit" className="w-full" loading={loading}>保存</Button>
+                    <Button type="primary" htmlType="submit" loading={loading} className="w-full">保存</Button>
                 </Form.Item>
             </Form>
         </div>
     );
 };
-
-export default UserPage;

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

@@ -1,4 +1,4 @@
-import { Form, Input, Button, notification, Modal } from 'antd';
+import { Form, Input, Button, Modal } from 'antd';
 import { useUserStore } from '@/stores';
 import { editAdminPassAPI } from '@/api/User';
 import { EditUser } from '@/types/app/user'
@@ -6,7 +6,7 @@ import { useState } from 'react';
 
 const { confirm } = Modal;
 
-const SystemPage = () => {
+export default () => {
     const store = useUserStore();
 
     const [loading, setLoading] = useState(false)
@@ -97,5 +97,3 @@ const SystemPage = () => {
         </div>
     );
 };
-
-export default SystemPage;

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

@@ -3,11 +3,11 @@ import { Segmented } from 'antd';
 import SynthesisTheme from './components/SynthesisTheme';
 import RecordTheme from './components/RecordTheme';
 
-const ThemePage = () => {
+export default () => {
     const [current, setCurrent] = useState<string>("综合配置");
 
     return (
-        <>
+        <div>
             <Segmented<string>
                 size="large"
                 options={['综合配置', '说说配置']}
@@ -22,8 +22,6 @@ const ThemePage = () => {
             {current === "说说配置" && (
                 <RecordTheme />
             )}
-        </>
+        </div>
     );
 };
-
-export default ThemePage;

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

@@ -4,7 +4,7 @@ import { editConfigDataAPI } from '@/api/Project';
 import { Web } from '@/types/app/project'
 import { useWebStore } from '@/stores';
 
-const WebPage = () => {
+export default () => {
     const [loading, setLoading] = useState(false);
 
     const [form] = Form.useForm();
@@ -102,5 +102,3 @@ const WebPage = () => {
         </div>
     );
 };
-
-export default WebPage;

src/pages/Setup/index.tsx

@@ -18,7 +18,7 @@ interface Setup {
     key: string;
 }
 
-const SetupPage = () => {
+export default () => {
     const [active, setActive] = useState("system");
     
     const iconSty = "w-5 h-8 mr-1"
@@ -57,7 +57,7 @@ const SetupPage = () => {
     ];
 
     return (
-        <>
+        <div>
             <Title value="项目配置" />
 
             <Card className='mt-2 min-h-[calc(100vh-180px)]'>
@@ -87,8 +87,6 @@ const SetupPage = () => {
                     </div>
                 </div>
             </Card>
-        </>
+        </div>
     );
 };
-
-export default SetupPage;

src/pages/Swiper/index.tsx

@@ -7,7 +7,7 @@ import { ColumnsType } from 'antd/es/table';
 import { CloudUploadOutlined, PictureOutlined } from '@ant-design/icons';
 import FileUpload from '@/components/FileUpload';
 
-const SwiperPage = () => {
+export default () => {
     const [loading, setLoading] = useState<boolean>(false);
     const [btnLoading, setBtnLoading] = useState(false)
     const [editLoading, setEditLoading] = useState(false)
@@ -180,7 +180,7 @@ const SwiperPage = () => {
     ];
 
     return (
-        <>
+        <div>
             <Title value="轮播图管理" />
 
             <Card className="[&>.ant-card-body]:!pt-0 mt-2 min-h-[calc(100vh-180px)]">
@@ -193,8 +193,6 @@ const SwiperPage = () => {
                 onSuccess={(url: string[]) => form.setFieldValue("image", url.join("\n"))}
                 onCancel={() => setIsModalOpen(false)}
             />
-        </>
+        </div>
     );
 };
-
-export default SwiperPage;

src/pages/Tag/index.tsx

@@ -5,7 +5,7 @@ import { Tag } from '@/types/app/tag';
 import Title from '@/components/Title';
 import { ColumnsType } from 'antd/es/table';
 
-const TagPage = () => {
+export default () => {
     const [loading, setLoading] = useState<boolean>(false);
     const [btnLoading, setBtnLoading] = useState(false)
 
@@ -139,5 +139,3 @@ const TagPage = () => {
         </div>
     );
 };
-
-export default TagPage;

src/pages/User/index.tsx

@@ -14,7 +14,7 @@ import Title from '@/components/Title';
 import logo from '@/images/logo/logo.png';
 import dayjs from 'dayjs';
 
-const UserPage = () => {
+export default () => {
     const [loading, setLoading] = useState<boolean>(false);
     const [btnLoading, setBtnLoading] = useState(false)
     const [editLoading, setEditLoading] = useState(false)
@@ -211,7 +211,7 @@ const UserPage = () => {
     }
 
     return (
-        <>
+        <div>
             <Title value="用户管理">
                 <Button type="primary" size='large' onClick={() => setDrawerVisible(true)}>新增用户</Button>
             </Title>
@@ -318,8 +318,6 @@ const UserPage = () => {
                     </Form.Item>
                 </Form>
             </Drawer>
-        </>
+        </div>
     );
 };
-
-export default UserPage;

src/pages/Wall/index.tsx

@@ -7,7 +7,7 @@ import Title from '@/components/Title';
 import type { Cate, Wall, FilterForm, FilterWall } from '@/types/app/wall';
 import dayjs from 'dayjs';
 
-const WallPage = () => {
+export default () => {
     const [loading, setLoading] = useState(false);
 
     const [wall, setWall] = useState<Wall>({} as Wall);
@@ -138,7 +138,7 @@ const WallPage = () => {
     }
 
     return (
-        <>
+        <div>
             <Title value='留言管理' />
 
             <Card className='my-2 overflow-scroll'>
@@ -188,8 +188,6 @@ const WallPage = () => {
                     <div><b>内容：</b> {wall?.content}</div>
                 </div>
             </Modal>
-        </>
+        </div>
     );
 };
-
-export default WallPage;

src/pages/Web/index.tsx

@@ -238,12 +238,12 @@ export default () => {
     ];
 
     return (
-        <>
+        <div>
             <Title value="网站管理" />
 
             <Card className="WebPage mt-2 min-h-[calc(100vh-180px)]">
                 <Tabs activeKey={tab} tabPosition="top" onChange={handleTabChange} items={tabItems} />
             </Card>
-        </>
+        </div>
     );
 };

src/pages/Work/index.tsx

@@ -59,7 +59,7 @@ export default () => {
     };
 
     return (
-        <>
+        <div>
             <Title value="工作台" />
 
             <Card className="mt-2 min-h-[calc(100vh-180px)]">
@@ -89,6 +89,6 @@ export default () => {
                 </div>
             </Card>
 
-        </>
+        </div>
     );
 }