如果本地没有token就跳转到登录页

src/components/RouteList/index.tsx

@@ -1,5 +1,6 @@
+import { useEffect, useState } from "react";
 import DefaultLayout from "@/layout/DefaultLayout";
-import { Route, Routes, useLocation } from "react-router-dom";
+import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
 
 import Home from '@/pages/Dashboard';
 import Create from '@/pages/Cate';
@@ -19,13 +20,13 @@ import Role from '@/pages/Role';
 import PageTitle from "../PageTitle";
 import Login from "@/pages/Login";
 
-import { useEffect, useState } from "react";
 import { useUserStore } from "@/stores";
 import { getRouteListAPI } from "@/api/Role";
 import { Route as RouteType } from "@/types/app/route";
 import NotFound from "../NotFound";
 
 export default () => {
+    const navigate = useNavigate();
     const store = useUserStore();
     const { pathname } = useLocation();
     const isLoginRoute = pathname === '/login';
@@ -57,6 +58,9 @@ export default () => {
     };
 
     useEffect(() => {
+        // 如果没有token就跳转到登录页
+        if (!store.token) return navigate("/login")
+
         if (store.role.id) getRouteList(store.role.id)
     }, [store]);
 

src/components/Sidebar/index.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 import SidebarLinkGroup from './SidebarLinkGroup';
-import { BiEditAlt, BiFolderOpen, BiHomeSmile, BiSliderAlt } from "react-icons/bi";
+
+import { BiEditAlt, BiFolderOpen, BiHomeSmile, BiSliderAlt, BiShieldQuarter, BiLineChart, BiCategoryAlt, BiBug } from "react-icons/bi";
 import { LuCrown } from "react-icons/lu";
-import { BiCategoryAlt, BiBug } from "react-icons/bi";
 import { LiaRssSolid } from "react-icons/lia";
-import { BiLineChart } from "react-icons/bi";
+
-import { BiShieldQuarter } from "react-icons/bi";
 import { useUserStore } from '@/stores';
 import { getRouteListAPI } from '@/api/Role'
 import { Route } from '@/types/app/route';

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

@@ -1,13 +1,14 @@
 import { useState, useEffect } from 'react';
 import { notification, Divider, Input, Alert, Button, Spin } from 'antd';
-import { PictureOutlined, LoadingOutlined } from '@ant-design/icons';
+import { PictureOutlined, LoadingOutlined, CloudUploadOutlined } from '@ant-design/icons';
 import { editLayoutDataAPI, getLayoutDataAPI } from '@/api/Project';
 import { Layout } from '@/types/app/project';
+import FileUpload from '@/components/FileUpload';
 
 const LayoutPage = () => {
     const [loading, setLoading] = useState<boolean>(false);
     const [swiperText, setSwiperText] = useState<string>('');
-
+    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
     const [layout, setLayout] = useState<Layout>({} as Layout);
 
     const onSidebar = (value: string) => {
@@ -47,8 +48,13 @@ const LayoutPage = () => {
         return new URL(`./image/${name}.png`, import.meta.url).href
     }
 
+    // 文件上传
+    const UploadBtn = () => (
+        <CloudUploadOutlined className='text-xl cursor-pointer' onClick={() => setIsModalOpen(true)} />
+    )
+
     return (
-        <div>
+        <>
             <Spin spinning={loading} indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />}>
                 <h2 className="text-xl pb-4 text-center">布局配置</h2>
 
@@ -59,6 +65,9 @@ const LayoutPage = () => {
                         onChange={(e) => setLayout({ ...layout, swiperImage: e.target.value })}
                         placeholder="请输入背景图地址"
                         prefix={<PictureOutlined />}
+                        addonAfter={<UploadBtn />}
+                        size='large'
+                        className='customizeAntdInputAddonAfter'
                     />
                     <img src={layout.swiperImage} alt="" className="w-1/3 mt-4 rounded" />
                 </div>
@@ -69,6 +78,7 @@ const LayoutPage = () => {
                         value={swiperText}
                         onChange={(e) => setSwiperText(e.target.value)}
                         autoSize={{ minRows: 2, maxRows: 4 }}
+                        size='large'
                     />
                     <Alert message="以换行分隔，每行表示一段文本" type="info" className="mt-2" />
                 </div>
@@ -101,7 +111,14 @@ const LayoutPage = () => {
 
                 <Button type="primary" size="large" className="w-full mt-4" onClick={editLayoutData}>修改布局</Button>
             </Spin>
-        </div>
+
+            <FileUpload
+                dir="swiper"
+                open={isModalOpen}
+                onSuccess={(url: string) => setLayout({ ...layout, swiperImage: url })}
+                onCancel={() => setIsModalOpen(false)}
+            />
+        </>
     );
 };
 

src/pages/Swiper/index.tsx

@@ -4,7 +4,7 @@ import { getSwiperListAPI, addSwiperDataAPI, editSwiperDataAPI, delSwiperDataAPI
 import { Swiper } from '@/types/app/swiper';
 import Title from '@/components/Title';
 import { ColumnsType } from 'antd/es/table';
-import { CloudUploadOutlined } from '@ant-design/icons';
+import { CloudUploadOutlined, PictureOutlined } from '@ant-design/icons';
 import FileUpload from '@/components/FileUpload';
 
 const SwiperPage = () => {
@@ -137,7 +137,7 @@ const SwiperPage = () => {
                         </Form.Item>
 
                         <Form.Item label="图片" name="image" rules={[{ required: true, message: '轮播图不能为空' }]}>
-                            <Input placeholder="https://blog.liuyuyang.net/swiper.jpg" addonAfter={<UploadBtn />} className='customizeAntdInputAddonAfter' />
+                            <Input placeholder="https://blog.liuyuyang.net/swiper.jpg" prefix={<PictureOutlined />} addonAfter={<UploadBtn />} className='customizeAntdInputAddonAfter' />
                         </Form.Item>
 
                         <Form.Item>
@@ -157,22 +157,10 @@ const SwiperPage = () => {
                 <Tabs activeKey={tab} onChange={handleTabChange} items={tabItems} />
             </Card>
 
-            {/* <Modal
-                open={isModelOpen}
-                title="查看图片"
-                footer={null}
-                onCancel={() => setIsModelOpen(false)}
-            >
-                <img src={viewImage} alt="swiper" className="w-full rounded mt-4" />
-            </Modal> */}
-
             <FileUpload
                 dir="swiper"
                 open={isModalOpen}
-                onSuccess={(url: string) => {
+                onSuccess={(url: string) => form.setFieldValue("image", url)}
-                    form.setFieldValue("image", url)
-                    getSwiperList()
-                }}
                 onCancel={() => setIsModalOpen(false)}
             />
         </>