大改动

src/App.tsx

@@ -10,6 +10,7 @@ import Article from './pages/Article';
 import Comment from './pages/Comment';
 import Web from './pages/Web';
 import Swiper from './pages/Swiper';
+import Setup from './pages/Setup';
 import Login from './pages/Login';
 import DefaultLayout from './layout/DefaultLayout';
 
@@ -129,6 +130,16 @@ function App() {
                 </>
               }
             />
+
+            <Route
+              path="/setup"
+              element={
+                <>
+                  <PageTitle title="Thrive - 项目配置" />
+                  <Setup />
+                </>
+              }
+            />
           </Routes>
         </DefaultLayout>
       )}

src/components/Sidebar/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 import SidebarLinkGroup from './SidebarLinkGroup';
 import Logo from '../../images/logo/logo.svg';
-import { BiEditAlt, BiFolderOpen, BiHomeSmile } from "react-icons/bi";
+import { BiEditAlt, BiFolderOpen, BiHomeSmile, BiSliderAlt } from "react-icons/bi";
 import { BiCategoryAlt } from "react-icons/bi";
 
 interface SidebarProps {
@@ -62,6 +62,25 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
   // 导航选中样式
   const sidebarItemActiveSty = "bg-graydark dark:bg-meta-4"
 
+  const Arrow = ({ open }: { open: boolean }) => {
+    return <svg
+      className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${open && 'rotate-180'
+        }`}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.41107 6.9107C4.73651 6.58527 5.26414 6.58527 5.58958 6.9107L10.0003 11.3214L14.4111 6.91071C14.7365 6.58527 15.2641 6.58527 15.5896 6.91071C15.915 7.23614 15.915 7.76378 15.5896 8.08922L10.5896 13.0892C10.2641 13.4147 9.73651 13.4147 9.41107 13.0892L4.41107 8.08922C4.08563 7.76378 4.08563 7.23614 4.41107 6.9107Z"
+        fill=""
+      />
+    </svg>
+  }
+
   return (
     <aside
       ref={sidebar}
@@ -132,9 +151,10 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                     <React.Fragment>
                       <NavLink
                         to="#"
-                        className={`${sidebarItemSty} ${(pathname === '/forms' || pathname.includes('forms')) && sidebarItemActiveSty}`}
+                        className={`${sidebarItemSty}`}
                         onClick={(e) => {
                           e.preventDefault();
+
                           sidebarExpanded
                             ? handleClick()
                             : setSidebarExpanded(true);
@@ -142,24 +162,9 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                       >
                         <BiCategoryAlt className='text-[22px]' />
                         管理
-                        <svg
+                        <Arrow open={open} />
-                          className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${open && 'rotate-180'
-                            }`}
-                          width="20"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            clipRule="evenodd"
-                            d="M4.41107 6.9107C4.73651 6.58527 5.26414 6.58527 5.58958 6.9107L10.0003 11.3214L14.4111 6.91071C14.7365 6.58527 15.2641 6.58527 15.5896 6.91071C15.915 7.23614 15.915 7.76378 15.5896 8.08922L10.5896 13.0892C10.2641 13.4147 9.73651 13.4147 9.41107 13.0892L4.41107 8.08922C4.08563 7.76378 4.08563 7.23614 4.41107 6.9107Z"
-                            fill=""
-                          />
-                        </svg>
                       </NavLink>
-                      {/* <!-- Dropdown Menu Start --> */}
+
                       <div
                         className={`translate transform overflow-hidden ${!open && 'hidden'
                           }`}
@@ -231,6 +236,16 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                   );
                 }}
               </SidebarLinkGroup>
+
+              <li>
+                <NavLink
+                  to="/setup"
+                  className={`${sidebarItemSty} ${pathname.includes('setup') && sidebarItemActiveSty}`}
+                >
+                  <BiSliderAlt className='text-[22px]' />
+                  系统
+                </NavLink>
+              </li>
             </ul>
           </div>
 

src/pages/Cate/index.scss

@@ -1,10 +1,11 @@
-.ant-tree {
+.CatePage {
-    .ant-tree-treenode,.ant-tree-node-content-wrapper{
+    .ant-tree-treenode,
-        width: 100%;
+    .ant-tree-node-content-wrapper {
+        width: 100% !important;
     }
 
-    .ant-tree-node-selected{
+    .ant-tree-node-selected {
-        .controls{
+        .controls {
             display: block !important;
         }
     }

src/pages/Cate/index.tsx

@@ -3,8 +3,8 @@ import { Cate } from '@/types/cate';
 import { addCateDataAPI, delCateDataAPI, editCateDataAPI, getCateDataAPI, getCateListAPI } from '@/api/Cate';
 import { DownOutlined } from '@ant-design/icons';
 import { Form, Input, Button, Tree, Modal, Spin, Dropdown, Card, MenuProps, Popconfirm, message } from 'antd';
-import "./index.scss"
 import Title from '@/components/Title';
+import "./index.scss"
 
 const CatePage: React.FC = () => {
     const [loading, setLoading] = useState(false);
@@ -124,7 +124,7 @@ const CatePage: React.FC = () => {
         <>
             <Title value="分类管理" />
 
-            <Card className={`[&>.ant-card-body]:!p-2 [&>.ant-card-body]:!pb-6 mt-2`}>
+            <Card className={`CatePage [&>.ant-card-body]:!p-2 [&>.ant-card-body]:!pb-6 mt-2`}>
                 <div className='my-2 text-center'>
                     <Button type="primary" onClick={() => setModel(true)}>新增一级分类</Button>
                 </div>

src/pages/Setup/index.scss

@@ -0,0 +1,25 @@
+.SetupPage {
+    .item {
+        position: relative;
+
+        &::before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 0;
+            transform: translateY(-50%);
+            width: 3.5px;
+            height: 0%;
+            background-color: #727cf5;
+            transition: height 0.3s;
+        }
+    }
+
+    .active {
+        background: #F7F7F8;
+
+        &::before {
+            height: 100%;
+        }
+    }
+}

src/pages/Setup/index.tsx

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { Card } from 'antd';
+import Title from '@/components/Title';
+import "./index.scss"
+
+interface Setup {
+    title: string;
+    description: string;
+    icon: React.ReactNode;
+    key: string;
+}
+
+const SetupPage = () => {
+    const [active, setActive] = useState("system");
+
+    const list: Setup[] = [
+        {
+            title: "系统配置",
+            description: "配置管理员账号、登录时间等",
+            icon: <div>123</div>,
+            key: "system"
+        },
+        {
+            title: "网站配置",
+            description: "配置网站标题、LOGO、描述、SEO等",
+            icon: <div>123</div>,
+            key: "web"
+        },
+        {
+            title: "布局配置",
+            description: "配置网站布局及代码高亮等",
+            icon: <div>123</div>,
+            key: "layout"
+        },
+        {
+            title: "个人设置",
+            description: "配置个人信息等",
+            icon: <div>123</div>,
+            key: "my"
+        }
+    ];
+
+    const handleNavigation = (key: string) => {
+        console.log(key);
+        setActive(key);
+    }
+
+    return (
+        <>
+            <Title value="项目配置" />
+
+            <Card className='SetupPage mt-2'>
+                <div className="flex">
+                    <ul className="w-52 mr-5 border-r border-[#eee]">
+                        {list.map((item) => (
+                            <li
+                                key={item.key}
+                                className={`item p-3 pl-5 mb-2 cursor-pointer transition-colors ${active === item.key ? 'active' : ''}`}
+                                onClick={() => handleNavigation(item.key)}
+                            >
+                                <h3 className="flex items-center text-base">
+                                    {/* <i className={`bx ${item.icon} mr-2`}></i> */}
+                                    {item.title}
+                                </h3>
+
+                                <p className="text-[13px] text-[#858585] text-gray-500 mt-1">{item.description}</p>
+                            </li>
+                        ))}
+                    </ul>
+
+                    <div className="flex-grow">
+                        <Card>
+
+                        </Card>
+                    </div>
+                </div>
+            </Card>
+        </>
+    );
+};
+
+export default SetupPage;

src/pages/Web/index.scss

@@ -1,159 +1,162 @@
-.list {
+.WebPage {
-    display: flex;
+    .list {
-    flex-wrap: wrap;
-    justify-content: center;
-    min-height: 100px;
-    margin-top: 40px;
-
-    .item {
-        overflow: hidden;
-        position: relative;
         display: flex;
-        flex-direction: column;
+        flex-wrap: wrap;
-        align-items: center;
+        justify-content: center;
-        width: 200px;
+        min-height: 100px;
-        height: 250px;
+        margin-top: 40px;
-        padding: 0px 20px;
-        margin-right: 50px;
-        margin-bottom: 20px;
-        border: 1px solid #eee;
-        border-radius: 5px;
-        background-color: #fff;
-        transition: box-shadow 0.3s;
 
-        &:hover {
-            box-shadow: 0px 2px 15px -3px rgba(121, 122, 243, 0.1);
-        }
 
-        &:hover .name {
+        .item {
-            color: #727cf5;
+            overflow: hidden;
-        }
-
-        &::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 80px;
-            background-color: #727cf5;
-            border-top-left-radius: 5px;
-            border-top-right-radius: 5px;
-            border-bottom-left-radius: 50%;
-            border-bottom-right-radius: 50%;
-        }
-
-        .avatar {
             position: relative;
             display: flex;
-            justify-content: center;
+            flex-direction: column;
             align-items: center;
-            width: 90px;
+            width: 200px;
-            height: 90px;
+            height: 250px;
-            margin-top: 30px;
+            padding: 0px 20px;
-            border-radius: 50%;
+            margin-right: 50px;
+            margin-bottom: 20px;
+            border: 1px solid #eee;
+            border-radius: 5px;
             background-color: #fff;
-            z-index: 2;
+            transition: box-shadow 0.3s;
 
-            img {
+            &:hover {
-                width: 93%;
+                box-shadow: 0px 2px 15px -3px rgba(121, 122, 243, 0.1);
-                height: 93%;
+            }
+
+            &:hover .name {
+                color: #727cf5;
+            }
+
+            &::after {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 80px;
+                background-color: #727cf5;
+                border-top-left-radius: 5px;
+                border-top-right-radius: 5px;
+                border-bottom-left-radius: 50%;
+                border-bottom-right-radius: 50%;
+            }
+
+            .avatar {
+                position: relative;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 90px;
+                height: 90px;
+                margin-top: 30px;
                 border-radius: 50%;
-                transition: transform 0.3s;
+                background-color: #fff;
+                z-index: 2;
 
-                &:hover {
+                img {
-                    transform: scale(1.1);
+                    width: 93%;
+                    height: 93%;
+                    border-radius: 50%;
+                    transition: transform 0.3s;
+
+                    &:hover {
+                        transform: scale(1.1);
+                    }
                 }
             }
-        }
 
-        .name {
+            .name {
-            margin: 10px 0;
+                margin: 10px 0;
-            font-weight: 900;
+                font-weight: 900;
-            transition: color 0.3s;
+                transition: color 0.3s;
-            cursor: pointer;
-        }
-
-        .description {
-            font-size: 13px;
-            color: #666;
-            line-height: 20px;
-
-            display: -webkit-box !important;
-            overflow: hidden;
-            word-break: break-all;
-            text-overflow: ellipsis;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-        }
-
-        .type {
-            position: absolute;
-            bottom: 12px;
-            padding: 2px 15px;
-            margin: 10px 0;
-            border-radius: 10px;
-            color: #fff;
-            background-color: #727cf5;
-            transition: bottom 0.3s;
-        }
-
-        &:hover .type {
-            bottom: -40px;
-        }
-
-        .operate {
-            position: absolute;
-            bottom: -40px;
-            display: flex;
-            background-color: #fff;
-            transition: bottom 0.3s;
-
-            width: 100%;
-            justify-content: center;
-            padding: 10px 0;
-
-            div {
-                padding: 3px 10px;
-                margin: 0 5px;
-                color: #fff;
-                font-size: 14px;
-                border-radius: 5px;
                 cursor: pointer;
+            }
 
-                &:nth-child(1) {
+            .description {
-                    background-color: #49b984;
+                font-size: 13px;
-                }
+                color: #666;
+                line-height: 20px;
 
-                &:nth-child(2) {
+                display: -webkit-box !important;
-                    background-color: #f16c6d;
+                overflow: hidden;
+                word-break: break-all;
+                text-overflow: ellipsis;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+            }
+
+            .type {
+                position: absolute;
+                bottom: 12px;
+                padding: 2px 15px;
+                margin: 10px 0;
+                border-radius: 10px;
+                color: #fff;
+                background-color: #727cf5;
+                transition: bottom 0.3s;
+            }
+
+            &:hover .type {
+                bottom: -40px;
+            }
+
+            .operate {
+                position: absolute;
+                bottom: -40px;
+                display: flex;
+                background-color: #fff;
+                transition: bottom 0.3s;
+
+                width: 100%;
+                justify-content: center;
+                padding: 10px 0;
+
+                div {
+                    padding: 3px 10px;
+                    margin: 0 5px;
+                    color: #fff;
+                    font-size: 14px;
+                    border-radius: 5px;
+                    cursor: pointer;
+
+                    &:nth-child(1) {
+                        background-color: #49b984;
+                    }
+
+                    &:nth-child(2) {
+                        background-color: #f16c6d;
+                    }
                 }
             }
-        }
 
-        &:hover .operate {
+            &:hover .operate {
-            bottom: 35px;
+                bottom: 35px;
-        }
+            }
 
-        .headFor {
+            .headFor {
-            position: absolute;
+                position: absolute;
-            bottom: -30px;
+                bottom: -30px;
-            display: flex;
+                display: flex;
-            justify-content: center;
+                justify-content: center;
-            align-items: center;
+                align-items: center;
-            width: 100%;
+                width: 100%;
-            height: 30px;
+                height: 30px;
-            color: #fff;
+                color: #fff;
-            background-color: #727cf5;
+                background-color: #727cf5;
-            transition: bottom 0.3s;
+                transition: bottom 0.3s;
 
-            border-bottom-left-radius: 5px;
+                border-bottom-left-radius: 5px;
-            border-bottom-right-radius: 5px;
+                border-bottom-right-radius: 5px;
-            cursor: pointer;
+                cursor: pointer;
-        }
+            }
 
-        &:hover .headFor {
+            &:hover .headFor {
-            bottom: 0;
+                bottom: 0;
+            }
         }
     }
 }

src/pages/Web/index.tsx

@@ -4,7 +4,7 @@ import { SearchOutlined } from '@ant-design/icons';
 import { getLinkListAPI, addLinkDataAPI, editLinkDataAPI, delLinkDataAPI, getLinkTypeListAPI } from '@/api/Web';
 import { LinkType, Web } from '@/types/web';
 import Title from '@/components/Title';
-import "./index.scss";
+import './index.scss';
 
 const LinkPage = () => {
     const [loading, setLoading] = useState(false);
@@ -114,7 +114,7 @@ const LinkPage = () => {
                         <div className="list">
                             {listTemp.length > 0 ? (
                                 listTemp.map(item => (
-                                    <div key={item.id} className="item">
+                                    <div key={item.id}  className={`item`}>
                                         <div className="avatar">
                                             <img src={item.image} alt="" className="avatar-img" />
                                         </div>
@@ -191,7 +191,7 @@ const LinkPage = () => {
         <>
             <Title value="网站管理" />
 
-            <Card className='mt-2'>
+            <Card className="WebPage mt-2">
                 <Tabs activeKey={tab} tabPosition="left" onChange={handleTabChange} items={tabItems} />
             </Card>
         </>