大改动

2024-08-08 15:27:57 +08:00
parent 15876e2dc6
commit 8c4fab2b71
8 changed files with 300 additions and 163 deletions
--- a/src/App.tsx
+++ b/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>
      )}
--- a/src/components/Sidebar/index.tsx
+++ b/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
-                          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>
+                        <Arrow open={open} />
                      </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>

--- a/src/pages/Cate/index.scss
+++ b/src/pages/Cate/index.scss
@@ -1,10 +1,11 @@
-.ant-tree {
-    .ant-tree-treenode,.ant-tree-node-content-wrapper{
-        width: 100%;
+.CatePage {
+    .ant-tree-treenode,
+    .ant-tree-node-content-wrapper {
+        width: 100% !important;
    }

-    .ant-tree-node-selected{
-        .controls{
+    .ant-tree-node-selected {
+        .controls {
            display: block !important;
        }
    }
--- a/src/pages/Cate/index.tsx
+++ b/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>
--- a/src/pages/Setup/index.scss
+++ b/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%;
+        }
+    }
+}
--- a/src/pages/Setup/index.tsx
+++ b/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;
--- a/src/pages/Web/index.scss
+++ b/src/pages/Web/index.scss
@@ -1,10 +1,12 @@
-.list {
+.WebPage {
+    .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        min-height: 100px;
        margin-top: 40px;

+
        .item {
            overflow: hidden;
            position: relative;
@@ -156,4 +158,5 @@
                bottom: 0;
            }
        }
+    }
 }
--- a/src/pages/Web/index.tsx
+++ b/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>
        </>